/* GENERATED by scripts/build-guide.mjs backgammon — do not edit; re-run the script.
   TriGammon's Y board for the Backgammon guide: the trigammon.css rules its markup wears
   (.tg-root renamed .tg-gy) and the --tg-* tokens as the app computed them. */
.tg-gy {
  --tg-camT: 0ms;
  --tg-d0: rgba(243, 231, 203, .26);
  --tg-d1: rgba(217, 119, 60, .26);
  --tg-d2: rgba(125, 139, 158, .26);
  --tg-dim: #9b9da4;
  --tg-f0: radial-gradient(circle at 34% 28%, #fffaf0, #f0e2c4 60%, #d6c39b);
  --tg-f1: radial-gradient(circle at 34% 28%, #ef9350, #cf6a31 60%, #a44b1d);
  --tg-f2: radial-gradient(circle at 34% 28%, #4a5364, #2c3340 60%, #161b24);
  --tg-felt: #173d31;
  --tg-feltLine: rgba(0, 0, 0, .35);
  --tg-gly: 11.16px;
  --tg-hit: #e0553d;
  --tg-hitGlow: rgba(224, 85, 61, .6);
  --tg-i0: #5b4520;
  --tg-i1: #fff1e4;
  --tg-i2: #e3ebf8;
  --tg-line: rgba(255, 255, 255, .12);
  --tg-mov: #3a86ff;
  --tg-mx: -1;
  --tg-r0: rgba(0, 0, 0, .3);
  --tg-r1: rgba(0, 0, 0, .26);
  --tg-r2: rgba(255, 255, 255, .28);
  --tg-sel: #e8c15a;
  --tg-selGlow: rgba(232, 193, 90, .55);
  --tg-t0: #f3e7cb;
  --tg-t1: #d9773c;
  --tg-t2: #7d8b9e;
  --tg-trace: rgba(255, 222, 160, .95);
  --tg-trim: 0px;
  --tg-txt: #eceae3;
  --tg-ui: system-ui, 'Segoe UI', sans-serif;
  --tg-wood: linear-gradient(180deg, #6d4a2a, #3b2517);
}
.tg-gy *, .tg-gy ::before, .tg-gy ::after { box-sizing: border-box; }
.tg-gy button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0px; }
.tg-gy i, .tg-gy em { font-style: normal; }
.tg-stage { --tg-camT: 0ms; position: absolute; inset: 0px; overflow: hidden; }
.tg-shake { position: absolute; inset: 0px; }
.tg-arm { --tg-a: 0; position: absolute; left: 0px; top: 0px; width: 301px; height: 100px; transform-origin: 0px 50%; transition: transform var(--tg-camT) cubic-bezier(.45, 0, .2, 1); will-change: transform; }
.tg-up { transform: rotate(calc(var(--tg-a) * -1deg)) scaleX(var(--tg-mx, 1)); transition: transform var(--tg-camT) cubic-bezier(.45, 0, .2, 1), opacity .25s; }
.tg-felt { position: absolute; inset: 0px; background: var(--tg-felt); box-shadow: inset 0 0 0 1px var(--tg-feltLine); clip-path: polygon(0px 50%, 28.87px 0px, 100% 0px, 100% 100%, 28.87px 100%); transition: clip-path var(--tg-camT) cubic-bezier(.45, 0, .2, 1); }
.tg-stage[data-view="rows"] .tg-felt { clip-path: polygon(var(--tg-trim, 0px) 50%, var(--tg-trim, 0px) 0, 100% 0, 100% 100%, var(--tg-trim, 0px) 100%); }
.tg-barline { position: absolute; left: 150px; top: 0px; width: 6px; height: 100%; background: var(--tg-wood); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 1px inset; }
.tg-hub { position: absolute; left: -6.6px; top: -6.6px; width: 13.2px; height: 13.2px; border-radius: 50%; background: var(--tg-wood); box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 1px; transform-origin: 50% 50%; transition: transform var(--tg-camT) cubic-bezier(.45, 0, .2, 1), opacity var(--tg-camT); z-index: 7; }
.tg-hub[data-on="0"] { opacity: 0; }
.tg-arm[data-inset="1"] { opacity: 0.92; }
.tg-lane { position: absolute; left: 30px; width: 246px; height: 4px; opacity: 0.8; z-index: 2; pointer-events: none; display: none; }
.tg-arm[data-numside="top"] .tg-lane { display: block; top: 1px; }
.tg-arm[data-numside="bot"] .tg-lane { display: block; bottom: 1px; }
.tg-arm[data-lane="0"] .tg-lane { background: repeating-linear-gradient(90deg, var(--tg-t0) 0 8px, transparent 8px 16px); }
.tg-arm[data-lane="1"] .tg-lane { background: repeating-linear-gradient(90deg, var(--tg-t1) 0 8px, transparent 8px 16px); }
.tg-arm[data-lane="2"] .tg-lane { background: repeating-linear-gradient(90deg, var(--tg-t2) 0 8px, transparent 8px 16px); }
.tg-pt { position: absolute; top: 0px; width: 20px; height: 100px; cursor: default; }
.tg-dia { position: absolute; inset: 0px; clip-path: polygon(50% 0px, 100% 50%, 50% 100%, 0px 50%); background: linear-gradient(to bottom, var(--tg-dH) 0 50%, var(--tg-dS) 50% 100%); transition: filter 0.15s; }
.tg-pt[data-alt="1"] .tg-dia { opacity: 0.6; }
.tg-arm[data-hs="0"] { --tg-dH: var(--tg-d0); }
.tg-arm[data-hs="1"] { --tg-dH: var(--tg-d1); }
.tg-arm[data-hs="2"] { --tg-dH: var(--tg-d2); }
.tg-arm[data-ss="0"] { --tg-dS: var(--tg-d0); }
.tg-arm[data-ss="1"] { --tg-dS: var(--tg-d1); }
.tg-arm[data-ss="2"] { --tg-dS: var(--tg-d2); }
.tg-pt[data-st="move"], .tg-pt[data-st="sel"], .tg-pt[data-st="dest"], .tg-pt[data-st="hit"] { cursor: pointer; }
.tg-pt[data-st="dest"]::after, .tg-pt[data-st="hit"]::after, .tg-pt[data-st="move"]::after { content: ""; position: absolute; inset: 0px -4px; }
.tg-ring { position: absolute; left: -0.5px; top: 23px; width: 21px; height: 54px; border-radius: 20px; display: none; z-index: 1; pointer-events: none; }
.tg-pt[data-st="dest"] .tg-ring, .tg-pt[data-st="sel"] .tg-ring { display: block; border: 2px solid var(--tg-sel); box-shadow: 0 0 14px var(--tg-selGlow); }
.tg-pt[data-st="hit"] .tg-ring { display: block; border: 2px solid var(--tg-hit); box-shadow: 0 0 14px var(--tg-hitGlow); }
.tg-pt[data-st="dest"] .tg-dia { background: rgba(232, 193, 90, 0.45); }
.tg-pt[data-st="hit"] .tg-dia { background: rgba(224, 85, 61, 0.5); }
.tg-pt[data-st="sel"] .tg-dia { background: rgba(232, 193, 90, 0.7); opacity: 1; }
.tg-pt[data-st="blk"] .tg-dia { background: repeating-linear-gradient(45deg, rgba(155, 157, 164, 0.45) 0px, rgba(155, 157, 164, 0.45) 2px, transparent 2px, transparent 5px); opacity: 1; }
.tg-chk::before { content: ""; position: absolute; inset: -2.6px; border-radius: 50%; display: none; pointer-events: none; }
.tg-pt[data-trace="to"] .tg-chk[data-on="1"]::before { display: block; border: 1.6px dotted var(--tg-trace); }
.tg-pt[data-trace="hit"] .tg-chk[data-on="1"] { box-shadow: 0 0 0 1.6px var(--tg-hit), 0 0 0 3.4px rgba(0, 0, 0, .55), 0 0 0 4.6px var(--tg-hit); }
.tg-pt[data-st=""][data-trace="from"] .tg-ring { display: block; border: 1.2px dashed var(--tg-trace); opacity: 0.55; }
.tg-mark { position: absolute; left: -4px; width: 28px; top: 50%; height: 18px; margin-top: -9px; display: flex; align-items: center; justify-content: center; z-index: 30; font: 700 16px/1 var(--tg-ui); text-shadow: rgba(0, 0, 0, 0.8) 0px 1px 2px; pointer-events: none; }
.tg-pt[data-st="dest"] .tg-mark { color: var(--tg-sel); }
.tg-pt[data-st="hit"] .tg-mark { color: var(--tg-hit); }
.tg-pt[data-st="blk"] .tg-mark { color: var(--tg-dim); }
.tg-chk { position: absolute; left: 1px; top: 0px; width: 18px; height: 18px; border-radius: 50%; display: none; pointer-events: none; }
.tg-chk[data-on="1"] { display: block; }
.tg-chk[data-s="0"] { --tg-rim: var(--tg-r0); background: var(--tg-f0); box-shadow: inset 0 0 0 1.2px var(--tg-rim), 0 1.3px 3.6px -1px rgba(0, 0, 0, .55); }
.tg-chk[data-s="1"] { --tg-rim: var(--tg-r1); background: var(--tg-f1); box-shadow: inset 0 0 0 1.2px var(--tg-rim), 0 1.3px 3.6px -1px rgba(0, 0, 0, .55); }
.tg-chk[data-s="2"] { --tg-rim: var(--tg-r2); background: var(--tg-f2); box-shadow: inset 0 0 0 1.2px var(--tg-rim), 0 1.3px 3.6px -1px rgba(0, 0, 0, .55); }
.tg-chk::after { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; font: 700 var(--tg-gly, 11.2px)/1 var(--tg-ui); transform: rotate(calc(var(--tg-a) * -1deg)) scaleX(var(--tg-mx, 1)); transition: transform var(--tg-camT) cubic-bezier(.45, 0, .2, 1); }
.tg-chk[data-s="0"]::after { content: "▲"; color: var(--tg-i0); }
.tg-chk[data-s="1"]::after { content: "■"; color: var(--tg-i1); }
.tg-chk[data-s="2"]::after { content: "●"; color: var(--tg-i2); }
.tg-pt[data-st="move"] .tg-chk { box-shadow: 0 0 0 1.6px var(--tg-mov), inset 0 0 0 1.2px var(--tg-rim); }
.tg-pt[data-st="sel"] .tg-chk { box-shadow: 0 0 0 2px var(--tg-sel), 0 0 12px var(--tg-selGlow), inset 0 0 0 1.2px var(--tg-rim); }
.tg-gy[data-lock="1"] .tg-pt[data-st="move"] .tg-chk { box-shadow: none; }
.tg-cnt { position: absolute; left: -4px; top: 50%; width: 28px; height: 14px; margin-top: -7px; border-radius: 7px; display: none; align-items: center; justify-content: center; z-index: 20; font: 700 9px/1 var(--tg-ui); color: var(--tg-txt); background: rgba(8, 8, 10, 0.86); box-shadow: inset 0 0 0 1px var(--tg-line); transform: rotate(calc(var(--tg-a) * -1deg)) scaleX(var(--tg-mx, 1)); transition: transform var(--tg-camT) cubic-bezier(.45, 0, .2, 1), opacity .25s; pointer-events: none; }
.tg-cnt:not(:empty) { display: flex; }
.tg-num { position: absolute; left: -4px; width: 28px; height: 12px; display: none; align-items: center; justify-content: center; font: 600 9.2px/1 var(--tg-ui); color: var(--tg-dim); pointer-events: none; }
.tg-arm[data-numside="top"] .tg-num { display: flex; top: -14px; }
.tg-arm[data-numside="bot"] .tg-num { display: flex; top: 102px; }
.tg-arm[data-inset="1"] .tg-num, .tg-arm[data-inset="1"] .tg-lane { display: none; }
.tg-num, .tg-lane { transition: opacity 0.18s; }
.tg-stage[data-cam="1"] .tg-num, .tg-stage[data-cam="1"] .tg-lane { opacity: 0; transition: opacity 0.08s; }
.tg-cap { position: absolute; left: 276px; top: 0px; width: 25px; height: 100px; background: var(--tg-wood); border-left: 1px solid rgba(0, 0, 0, 0.45); }
.tg-tray { position: absolute; left: 1.6px; width: 21.8px; border-radius: 4px; background: rgba(0, 0, 0, 0.34); box-shadow: inset 0 0 0 1px var(--tg-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: box-shadow 0.2s, background 0.2s; }
.tg-tray[data-kind="off"] { top: 1.2px; height: 40px; }
.tg-tray[data-kind="bar"] { top: 46px; height: 48px; }
.tg-tray b { font: 700 8.8px/1 var(--tg-ui); }
.tg-tray[data-s="0"] b { color: var(--tg-t0); }
.tg-tray[data-s="1"] b { color: var(--tg-t1); }
.tg-tray[data-s="2"] b { color: var(--tg-t2); }
.tg-tray em { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--tg-txt); font-variant-numeric: tabular-nums; }
.tg-tray[data-kind="bar"][data-hot="1"] { background: rgba(224, 85, 61, 0.2); box-shadow: inset 0 0 0 1.5px var(--tg-hit); }
.tg-tray[data-kind="bar"][data-hot="1"] em { color: var(--tg-hit); }
.tg-tray[data-sel="1"] { box-shadow: inset 0 0 0 2px var(--tg-sel), 0 0 12px var(--tg-selGlow); }
.tg-tray[data-flash="1"] { animation: 0.6s ease-out 0s 1 normal none running tg-flash; }
.tg-tray[data-live="1"] { cursor: pointer; box-shadow: inset 0 0 0 2px var(--tg-sel), 0 0 12px var(--tg-selGlow); background: rgba(232, 193, 90, 0.22); }
.tg-shake { perspective: 1600px; }
.tg-flip { position: absolute; inset: 0px; transform-origin: 50% 50%; }
.tg-stage[data-flipping="1"] .tg-up, .tg-stage[data-flipping="1"] .tg-cnt, .tg-stage[data-flipping="1"] .tg-dirs { opacity: 0; transition: opacity 0.12s; }
.tg-stage[data-flipping="1"] .tg-chk::after { transition: none; }
.tg-dirs { transition: opacity 0.3s; }
.tg-dirs { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 8; }
.tg-dir { opacity: 0; transition: opacity 0.3s ease-out; }
.tg-dir polyline { fill: none; stroke-width: var(--tg-dw); stroke-linecap: round; stroke-linejoin: round; }
.tg-dir[data-s="0"] polyline { stroke: var(--tg-t0); }
.tg-dir[data-s="0"] polygon { fill: var(--tg-t0); }
.tg-dir[data-s="1"] polyline { stroke: var(--tg-t1); }
.tg-dir[data-s="1"] polygon { fill: var(--tg-t1); }
.tg-dir[data-s="2"] polyline { stroke: var(--tg-t2); }
.tg-dir[data-s="2"] polygon { fill: var(--tg-t2); }
.tg-stage[data-view="y"] .tg-dir-y, .tg-stage[data-view="rows"] .tg-dir-rows { opacity: 0.42; }
.tg-stage[data-cam="1"] .tg-dir { opacity: 0; transition: opacity 0.2s ease-in; }