/* GENERATED by scripts/build-guide.mjs backgammon — do not edit; re-run the script.
   The "ruby" board scheme's tokens (the Backgammon guide's look), the board's own
   felt / wood surfaces, and only the style.css rules the board's markup and the dice use. */
.cg-page {
  --pgr-bg: radial-gradient(135% 120% at 50% -10%,#8a1722 0%,#580C1F 60%,#3d0815 100%);
  --pgr-seat: rgba(255,255,255,.05);
  --pgr-panel: rgba(255,255,255,.07);
  --pgr-line: rgba(255,255,255,.12);
  --pgr-txt: #f6e7e9;
  --pgr-dim: rgba(246,231,233,.58);
  --pgr-track: rgba(0,0,0,.34);
  --pgr-sel: #EF7A86;
  --pgr-btn: linear-gradient(180deg,#C52233,#a51c30);
  --pgr-btnTxt: #fff;
  --pgr-bubbleBg: #f6e7e9;
  --pgr-bubbleTxt: #580C1F;
  --pgr-selBg: rgba(239,122,134,.18);
  --pgr-gold: #F0C05A;
  --pgr-solid: #64101c;
  --pgr-goldBg: color-mix(in oklch, #F0C05A 16%, transparent);
  --pgr-felt: rgba(0,0,0,.26);
  --pgr-wood: rgba(0,0,0,.4);
  --cg-base: #580C1F;
}
.bgm-board { display: flex; flex-direction: column; border: 2px solid var(--pgr-line); border-radius: 14px; overflow: hidden; background: var(--pgr-wood); aspect-ratio: 1 / 1.12; }
.bgm-field { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; background: var(--pgr-felt); }
.bgm-half { flex: 1 1 0%; display: flex; min-height: 0px; }
.bgm-row { flex: 1 1 0%; display: flex; min-width: 0px; }
.bgm-bar { width: clamp(16px, 5vw, 26px); flex: 0 0 auto; background: var(--pgr-wood); border-left: 1px solid var(--pgr-line); border-right: 1px solid var(--pgr-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0px; }
.bgm-pt { cursor: pointer; position: relative; flex: 1 1 0%; min-width: 0px; display: flex; align-items: center; padding: 3px 0px; }
.bgm-tri { position: absolute; inset: 0px; }
.bgm-num { position: absolute; left: 0px; right: 0px; text-align: center; font-size: 8px; font-weight: 700; color: var(--pgr-dim); opacity: 0.7; z-index: 1; }
.bgm-stack { position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; }
.bgm-tray { height: clamp(30px, 9vw, 44px); flex: 0 0 auto; display: flex; background: var(--pgr-wood); border-top: 2px solid var(--pgr-line); }
.bgm-tray-cell { flex: 1 1 0%; display: flex; align-items: center; gap: 3px; padding: 4px 9px; overflow: hidden; border-radius: 9px; transition: background 0.2s; }
.bgm-tray-you { cursor: pointer; flex-direction: row-reverse; }
.bgm-tray-lbl { font-size: 8px; font-weight: 700; color: var(--pgr-dim); opacity: 0.7; }
.bgm-traychips { position: relative; flex: 1 1 0%; min-width: 0px; align-self: stretch; }
.bgm-board { align-self: center; width: 100%; max-width: min(100%, 62vh); }
.dr-die { will-change: transform; transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; }