/* GENERATED by scripts/build-guide.mjs senet — do not edit; re-run the script.
   The page look (the "ember" board scheme, as on the Ur guide), the Senet board's Classic
   tokens (the --sn-* block on #senet-game-screen), and the app's own .sn-* / die-face rules
   (only those the lifted board, pieces and sticks use). */
.cg-page {
  --pgr-bg: radial-gradient(135% 120% at 50% -10%,#2c2530 0%,#221D23 55%,#171318 100%);
  --pgr-seat: rgba(255,255,255,.04);
  --pgr-panel: rgba(255,255,255,.06);
  --pgr-line: rgba(208,227,127,.13);
  --pgr-txt: #ece6db;
  --pgr-dim: rgba(236,230,219,.55);
  --pgr-track: rgba(0,0,0,.32);
  --pgr-sel: #D1603D;
  --pgr-btn: linear-gradient(180deg,#DDB967,#c7a050);
  --pgr-btnTxt: #2a2111;
  --pgr-bubbleBg: #D0E37F;
  --pgr-bubbleTxt: #2a3009;
  --pgr-selBg: rgba(209,96,61,.18);
  --pgr-gold: #DDB967;
  --pgr-solid: #221c24;
  --pgr-goldBg: color-mix(in oklch, #DDB967 16%, transparent);
  --cg-base: #221D23;
}
.sn-gboard {
  --sn-cone: linear-gradient(180deg, #4f80d8, #2a55b4);
  --sn-spool: linear-gradient(180deg, #4b4641, #232019);
  --sn-pieceEdge: rgba(12, 24, 58, .9);
  --sn-sw: 1.2px;
  --sn-stroke: drop-shadow(var(--sn-sw) 0 0 var(--sn-pieceEdge))
    drop-shadow(calc(-1 * var(--sn-sw)) 0 0 var(--sn-pieceEdge))
    drop-shadow(0 var(--sn-sw) 0 var(--sn-pieceEdge))
    drop-shadow(0 calc(-1 * var(--sn-sw)) 0 var(--sn-pieceEdge));
  --sn-gold: #b8862c;
  --sn-accent: #2f7d74;
  --sn-danger: #a8443a;
  --sn-onaccent: #ffffff;
  --sn-ongold: #241d10;
  --sn-line: var(--pgr-line, rgba(238,241,236,.15));
  --sn-dim: color-mix(in oklab, var(--pgr-txt, #efe6d4) 56%, transparent);
  --sn-panel: color-mix(in oklab, #fff 4.5%, transparent);
  --sn-sq0: #e9e0c9;
  --sn-sq1: #c8ab77;
  --sn-ink: #4a3a26;
  --sn-special: #dccba0;
  --sn-board: linear-gradient(180deg, #6b563a, #4a3a26);
}
.sn-caplab { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sn-dim); white-space: nowrap; }
.sn-gold { color: var(--sn-gold); }
.sn-piece { display: block; width: var(--sn-piecew, 40px); height: var(--sn-pieceh, 48px); background: var(--sn-cone); filter: var(--sn-stroke) drop-shadow(0 2px 3px rgba(0,0,0,.45)); clip-path: polygon(50% 2%, 88% 97%, 12% 97%); position: relative; z-index: 2; }
.sn-piece[data-side="opp"] { background: var(--sn-spool); clip-path: polygon(8% 0px, 92% 0px, 64% 50%, 92% 100%, 8% 100%, 36% 50%); }
.sn-sq[data-target] { --sn-tc: var(--sn-accent); }
.sn-sq[data-target="swap"] { --sn-tc: var(--sn-gold); }
.sn-sq[data-target="water"] { --sn-tc: var(--sn-danger); }
.sn-target { transition: transform 0.12s, background-color 0.12s; }
.sn-boardpanel { background: var(--sn-board); border: 1px solid var(--sn-line); border-radius: 18px; padding: var(--sn-boardpad, 12px); display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.sn-boardhead { display: flex; align-items: center; gap: 10px; padding: 0px 10px; }
.sn-boardhead .sn-rule { flex: 1 1 0%; height: 1px; background: var(--sn-line); }
.sn-boardwrap { position: relative; padding: 0 var(--sn-railw, 26px); }
.sn-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--sn-cellgap, 5px); grid-auto-rows: var(--sn-cellh, 92px); }
.sn-sq { position: relative; display: flex; align-items: center; justify-content: center; border-radius: var(--sn-cellr, 10px); border: 1px solid rgba(0, 0, 0, 0.16); background: color-mix(in oklch, var(--sn-sq1) calc(var(--sn-t) * 58%), var(--sn-sq0)); color: var(--sn-ink); }
.sn-sq[data-special="1"] { background: var(--sn-special); border-color: var(--sn-gold); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sn-gold) 34%, transparent); }
.sn-num-sq { position: absolute; top: 4px; left: 6px; font-size: var(--sn-numfs, 11px); font-weight: 700; opacity: 0.45; line-height: 1; }
.sn-chev { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; font-size: var(--sn-chevfs, 30px); opacity: 0.13; font-weight: 300; pointer-events: none; }
.sn-sqglyph { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; color: var(--sn-gold); opacity: 0.9; }
.sn-sqglyph svg { width: var(--sn-glyphsz, 26px); height: var(--sn-glyphsz, 26px); }
.sn-sq[data-wall]::before { content: ""; position: absolute; top: 3px; height: 4px; border-radius: 2px; background: var(--sn-danger); left: -4px; right: -4px; z-index: 4; }
.sn-sq[data-wall="head"]::before { left: 2px; border-radius: 2px 0px 0px 2px; }
.sn-sq[data-wall="tail"]::before { right: 2px; border-radius: 0px 2px 2px 0px; }
.sn-target { position: absolute; inset: 3px; border-radius: 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; z-index: 3; cursor: pointer; border: 2px dashed var(--sn-accent); background: color-mix(in oklch, var(--sn-accent) 20%, transparent); box-shadow: var(--sn-glow, none); }
.sn-target span { padding: 2px 7px; border-radius: 999px; font-size: var(--sn-tagfs, 10.5px); font-weight: 800; letter-spacing: 0.05em; background: var(--sn-accent); color: var(--sn-onaccent); }
.sn-sq[data-target="swap"] .sn-target { border-color: var(--sn-gold); background: color-mix(in oklch, var(--sn-gold) 20%, transparent); }
.sn-sq[data-target="swap"] .sn-target span { background: var(--sn-gold); color: var(--sn-ongold); }
.sn-sq[data-target="water"] .sn-target { border-color: var(--sn-danger); background: color-mix(in oklch, var(--sn-danger) 22%, transparent); }
.sn-sq[data-target="water"] .sn-target span { background: var(--sn-danger); color: rgb(255, 255, 255); }
.sn-sq[data-blocked="1"] { outline: 2px dashed var(--sn-danger); outline-offset: -3px; }
.sn-rail-turn { position: absolute; width: var(--sn-railw, 22px); height: 33.4%; border: 3px solid var(--sn-accent); }
.sn-rail-turn i { position: absolute; bottom: -9px; color: var(--sn-accent); font-size: 14px; font-style: normal; line-height: 1; }
.sn-rail-r { right: 2px; top: 16.6%; border-left-width: medium; border-left-style: none; border-left-color: currentcolor; border-radius: 0px 14px 14px 0px; }
.sn-rail-r i { right: -2px; }
.sn-rail-l { left: 2px; top: 50%; border-right-width: medium; border-right-style: none; border-right-color: currentcolor; border-radius: 14px 0px 0px 14px; }
.sn-rail-l i { left: -2px; }
.sn-edge { position: absolute; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sn-gold); writing-mode: vertical-rl; }
.sn-edge-start { left: -2px; top: 5%; transform: rotate(180deg); }
.sn-edge-exit { right: -3px; bottom: 5%; }
.dr-die { will-change: transform; transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; }