/* GENERATED by scripts/build-guide.mjs yutnori — do not edit; re-run the script.
   The page look (the "ember" board scheme, as on the Ur and Senet guides), the Yut Nori
   board's Classic tokens (the --yn-* block on #yutnori-game-screen / .yn-root), its sizing
   tokens (from .yn-root; --yn-bs is set per figure by guide.js), and the app's own .yn-* /
   die-face rules from yutnori.css (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;
}
.yn-gboard {
  --yn-table: radial-gradient(120% 100% at 50% -10%, #3b332a 0%, #272119 55%, #161210 100%);
  --yn-cloth: linear-gradient(150deg, #dcd0b4, #c2b193);
  --yn-cloth-edge: rgba(58, 46, 32, .5);
  --yn-line: rgba(52, 42, 30, .5);
  --yn-stn: #f2ebd9;
  --yn-stn-line: rgba(52, 42, 30, .62);
  --yn-stn-hot: #e9dcb8;
  --yn-stn-hot-line: rgba(52, 42, 30, .8);
  --yn-panel: #efe6d0;
  --yn-panel-line: rgba(72, 58, 38, .28);
  --yn-txt: #f1e8d7;
  --yn-dim: rgba(241, 232, 215, .6);
  --yn-ink: #33291c;
  --yn-ptxt: #3a2f20;
  --yn-pdim: rgba(58, 47, 32, .66);
  --yn-chrome: rgba(255, 255, 255, .055);
  --yn-chrome-line: rgba(226, 208, 177, .24);
  --yn-accent: #2f6f62;
  --yn-gold: #9d7519;
  --yn-danger: #96382e;
  --yn-diebg: linear-gradient(180deg, #f8f2e1, #e6dabd);
  --yn-btn: linear-gradient(180deg, #b98f2c, #95701c);
  --yn-btn-txt: #241a0c;
  --yn-on-dark: #f6efdd;
  --yn-on-gold: #241a0c;
  --yn-count-txt: #f2e9d6;
  --yn-glow: 0 0 0 rgba(0, 0, 0, 0);
  --yn-soft-glow: 0 0 0 rgba(0, 0, 0, 0);
  --yn-sheet-bg: #efe6d0;
  --yn-scrim: rgba(24, 18, 10, .38);
  --yn-blur: none;
  --yn-p0: #2f4b7c;
  --yn-p1: #9c3b32;
  --yn-p2: #4c6b46;
  --yn-p3: #a8842c;
  --yn-stroke-c: rgba(20, 14, 8, .7);
  --yn-corner: calc(var(--yn-bs) * .0954);
  --yn-edge: calc(var(--yn-bs) * .0723);
  --yn-diag: calc(var(--yn-bs) * .0694);
  --yn-centre: calc(var(--yn-bs) * .1156);
  --yn-tok: calc(var(--yn-bs) * .0434);
  --yn-lift: calc(var(--yn-bs) * .0092);
}
.yn-boardwrap { flex: 0 0 auto; align-self: center; position: relative; width: var(--yn-bs); height: var(--yn-bs); border-radius: 16px; background: var(--yn-cloth); box-shadow: inset 0 0 0 1px var(--yn-cloth-edge), 0 18px 40px -22px rgba(0, 0, 0, .7); }
.yn-board { position: absolute; inset: 0px; }
.yn-lines { position: absolute; inset: 0px; width: 100%; height: 100%; overflow: visible; }
.yn-lines rect, .yn-lines line { fill: none; stroke: var(--yn-line); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.yn-chevs, .yn-stations { position: absolute; inset: 0px; }
.yn-chev { position: absolute; width: 6px; height: 6px; border-top: 1.5px solid var(--yn-ink); border-right: 1.5px solid var(--yn-ink); opacity: 0.46; transform: translate(-50%, -50%) rotate(var(--yn-ang)); }
.yn-st { --yn-d: var(--yn-edge); position: absolute; width: var(--yn-d); height: var(--yn-d); margin-left: calc(var(--yn-d) / -2); margin-top: calc(var(--yn-d) / -2); border-radius: 50%; background: var(--yn-stn); box-shadow: inset 0 0 0 1px var(--yn-stn-line); z-index: 8; }
.yn-st[data-kind="corner"] { --yn-d: var(--yn-corner); }
.yn-st[data-kind="diag"] { --yn-d: var(--yn-diag); }
.yn-st[data-kind="centre"] { --yn-d: var(--yn-centre); }
.yn-st[data-fork="1"] { background: var(--yn-stn-hot); box-shadow: inset 0 0 0 1.5px var(--yn-stn-hot-line); }
.yn-ring { display: none; }
.yn-st[data-fork="1"] .yn-ring { display: block; position: absolute; inset: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--yn-stn-hot-line); opacity: 0.5; pointer-events: none; }
.yn-st[data-start="1"] { box-shadow: inset 0 0 0 2px var(--yn-stn-line); }
.yn-lab { position: absolute; transform: translate(-50%, 0px); z-index: 9; white-space: nowrap; pointer-events: none; font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--yn-ink); opacity: 0.6; }
.yn-lab-centre { margin-top: calc(var(--yn-centre) / 2 + 4px); }
.yn-lab-start { margin-top: calc(var(--yn-corner) / 2 + 3px); opacity: 0.72; transform: translate(-78%, 0px); }
.yn-tok { --yn-tsz: var(--yn-tok); --yn-pc: var(--yn-p0); --yn-stroke: drop-shadow(.7px 0 0 var(--yn-stroke-c)) drop-shadow(-.7px 0 0 var(--yn-stroke-c)) drop-shadow(0 .7px 0 var(--yn-stroke-c)) drop-shadow(0 -.7px 0 var(--yn-stroke-c)); position: absolute; left: 50%; top: 50%; width: var(--yn-tsz); height: var(--yn-tsz); display: block; font-style: normal; background: linear-gradient(158deg, color-mix(in oklab, var(--yn-pc) 74%, #ffffff), color-mix(in oklab, var(--yn-pc) 88%, #000000)); border-radius: 50%; transform: translate(-50%, -50%)
    translate(calc((var(--pi, 0) - (var(--pn, 1) - 1) / 2) * 3px),
              calc(var(--yn-lift) * ((var(--sn, 1) - 1) / 2 - var(--k, 0)) * 1.1)); filter: var(--yn-stroke) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4)); transition: opacity 0.2s; }
.yn-tok[data-ci="0"] { --yn-pc: var(--yn-p0); }
.yn-tok[data-ci="1"] { --yn-pc: var(--yn-p1); }
.yn-tok[data-ci="2"] { --yn-pc: var(--yn-p2); }
.yn-tok[data-ci="3"] { --yn-pc: var(--yn-p3); }
.yn-tok[data-si="1"] { border-radius: 26%; }
.yn-tok[data-si="2"] { border-radius: 0px; clip-path: polygon(50% 5%, 95% 93%, 5% 93%); }
.yn-tok[data-si="3"] { border-radius: 0px; clip-path: polygon(26% 3%, 74% 3%, 98% 50%, 74% 97%, 26% 97%, 2% 50%); }
.yn-tok[data-top="1"]::after { content: ""; position: absolute; left: 14%; right: 46%; top: 12%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); opacity: 0.75; }
.yn-count { position: absolute; right: -4px; bottom: -3px; z-index: 20; min-width: 14px; height: 14px; padding: 0px 3px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800; font-style: normal; background: var(--yn-ink); color: var(--yn-count-txt); box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 0px 1.5px; }
.yn-target { --yn-tc: var(--yn-accent); position: absolute; left: 50%; top: 50%; width: calc(var(--yn-d) + 11px); height: calc(var(--yn-d) + 11px); transform: translate(-50%, -50%); border-radius: 50%; z-index: 14; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--yn-tc); background: color-mix(in oklab, var(--yn-tc) 10%, transparent); }
.yn-target[data-kind="B"], .yn-target[data-kind="home"] { --yn-tc: var(--yn-gold); }
.yn-target[data-kind="capture"] { --yn-tc: var(--yn-danger); }
.yn-target[data-sel="1"] { box-shadow: inset 0 0 0 2.5px var(--yn-tc), var(--yn-glow); background: color-mix(in oklab, var(--yn-tc) 22%, transparent); }
.yn-tlab { transform: translateY(9px); padding: 1px 5px; border-radius: 999px; white-space: nowrap; background: var(--yn-tc); color: var(--yn-on-dark); font-size: 8px; font-weight: 800; letter-spacing: 0.04em; }
.yn-target[data-kind="B"] .yn-tlab, .yn-target[data-kind="home"] .yn-tlab { color: var(--yn-on-gold); }
.dr-die { will-change: transform; transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; }