/* Backgammon screen. Game-specific only; everything else comes from styles.css. All classes start with bg-. */
.bg-seats { grid-template-columns: 1fr 1fr; }
.bg-seats .seat { min-width: 0; }
.bg-dot {
  display: inline-block; width: .85rem; height: .85rem; border-radius: 50%; margin-right: .35rem; vertical-align: -.08rem;
}

/* The board: 12 points + bar + off tray per row. --disc is one checker's size; it shrinks to fit a 320-360px phone. */
.bg-board {
  --disc: clamp(1rem, calc((min(100vw, 40rem) - 6.9rem) / 13), 2rem);
  --tri-a: #d2b07a;
  --tri-b: #8e3434;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) calc(var(--disc) + .35rem) repeat(6, minmax(0, 1fr)) 2rem;
  row-gap: .55rem; column-gap: 1px;
  padding: 4px; margin: 0 0 .5rem;
  background: var(--felt-dark); border: 3px solid #4a3220; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}

.bg-pt, .bg-bar {
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0;
  height: calc(var(--disc) * 5 + 1rem); margin: 0; padding: 0; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit;
}
.bg-pt.bg-bot, .bg-bar.bg-bot { flex-direction: column-reverse; }
.bg-pt::before {
  content: ''; position: absolute; left: 1px; right: 1px; top: 1rem; bottom: .25rem;
  background: var(--tri); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.bg-pt.bg-bot::before { top: .25rem; bottom: 1rem; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bg-odd { --tri: var(--tri-a); }
.bg-even { --tri: var(--tri-b); }
.bg-num {
  position: relative; flex: none; height: 1rem; line-height: 1rem; padding: 0 2px; border-radius: 4px;
  font-size: .62rem; font-weight: 700; color: rgba(255, 255, 255, .6);
}

.bg-chk {
  position: relative; flex: none; display: grid; place-items: center; width: var(--disc); height: var(--disc);
  border-radius: 50%; font: 800 calc(var(--disc) * .5)/1 var(--body); box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.bg-c-white { background: radial-gradient(circle at 35% 30%, #fff, #efe6cf 55%, #cdbf9c); border: 1px solid #6f6248; color: #1b1b1b; }
.bg-c-black { background: radial-gradient(circle at 35% 30%, #6a6a6a, #2a2a2a 55%, #0e0e0e); border: 1px solid #000; color: #fff; }

/* the bar: their checkers in the top half, yours in the bottom half, both near the middle */
.bg-bar { background: #4a3220; justify-content: flex-end; padding-bottom: .25rem; }
.bg-bar.bg-bot { justify-content: flex-end; padding: .25rem 0 0; }

/* borne-off trays */
.bg-off {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 0;
  margin: 0; padding: 0; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit;
}
.bg-offn { font-weight: 800; font-size: 1.05rem; line-height: 1; }
.bg-offl { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* tapping: checkers you can move, the one you picked, where it can go, and the last moves */
button.bg-pt, button.bg-bar, button.bg-off { cursor: pointer; }
.bg-src { box-shadow: inset 0 0 0 2px rgba(227, 179, 65, .6); }
.bg-src .bg-num { color: var(--gold); }
.bg-sel { box-shadow: inset 0 0 0 3px var(--gold); background: rgba(227, 179, 65, .2); }
.bg-sel .bg-num { color: var(--gold); }
.bg-dst { box-shadow: inset 0 0 0 3px var(--good); background: rgba(126, 226, 164, .22); }
.bg-pt.bg-dst::before { filter: brightness(1.3) saturate(1.2); }
.bg-dst .bg-num { color: var(--good); }
.bg-last .bg-num { color: #1b1b1b; background: var(--cream); }

/* under the board */
.bg-controls { margin-bottom: .5rem; }
.bg-dice { justify-content: center; margin: .5rem 0; }
.bg-hint { text-align: center; margin: .25rem 0 .5rem; font-weight: 600; }
.bg-go { font-size: 1.3rem; min-height: 60px; margin: .5rem 0; }
.bg-open { display: flex; justify-content: center; gap: 2rem; margin: .5rem 0; }
.bg-open-one { display: grid; justify-items: center; gap: .25rem; }
.bg-q { place-items: center; display: inline-grid; grid-template-columns: 1fr; grid-template-rows: 1fr; color: #1b1b1b; font-weight: 800; font-size: 1.4rem; opacity: .6; }
.bg-lastturn {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem .6rem; margin: .25rem 0;
  color: var(--muted);
}
.bg-mini { margin: 0; gap: .25rem; }
.bg-legend { text-align: center; margin: .25rem 0 0; }