/* =====================================================================
   Нарды — a wooden board seen from above: bevelled rails, a recessed
   field with inlaid points and checker wells, a raised hinge bar and a
   recessed bear-off tray. Geometry lives in js/games/backgammon.js
   (everything is positioned in % of the board box).
   ===================================================================== */
.g-backgammon {
  --prow-h: 46px;
  --info-h: 36px;
  display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 760px; margin: 0 auto; min-height: 0;
}
body.in-game .arena > .g-backgammon { flex: 1 1 auto; min-height: 0; height: 100%; }

/* players + board: a size container, so the board fits the space left by width AND height;
   the group is centred vertically, the leftover space goes above and below it */
.g-backgammon .bg-stage {
  position: relative; flex: none; height: min(calc(96vw + 2 * var(--prow-h) + var(--info-h) + 18px), 680px); min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px; container-type: size;
}
body.in-game .g-backgammon .bg-stage { flex: 1 1 0; height: auto; }
.g-backgammon .bg-p { min-width: 0; flex: none; }
.g-backgammon .bg-p .prow, body.in-game .arena .g-backgammon .bg-p .prow { height: var(--prow-h); padding: 0 10px; }
.g-backgammon .bg-board {
  position: relative; flex: none; align-self: center; aspect-ratio: var(--ar);
  width: 100%;
  width: min(100cqw, calc((100cqh - 2 * var(--prow-h) - var(--info-h) - 18px) * var(--ar)));
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.g-backgammon .bg-board > * { position: absolute; }

/* short screens: both players share one compact row above the board */
@media (max-height: 600px) {
  .g-backgammon { --prow-h: 38px; }
  .g-backgammon .bg-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; }
  .g-backgammon .bg-info { grid-row: 3; grid-column: 1 / -1; }
  .g-backgammon .bg-p.opp { grid-area: 1 / 1; }
  .g-backgammon .bg-p.me { grid-area: 1 / 2; }
  .g-backgammon .bg-board { grid-row: 2; grid-column: 1 / -1; justify-self: center; width: min(100cqw, calc((100cqh - var(--prow-h) - var(--info-h) - 12px) * var(--ar))); }
  .g-backgammon .bg-p .prow, body.in-game .arena .g-backgammon .bg-p .prow { padding: 0 8px; gap: 7px; }
  .g-backgammon .prow .av, body.in-game .arena .g-backgammon .prow .av { width: 26px !important; height: 26px !important; font-size: 11px !important; }
  .g-backgammon .prow .pname b { font-size: 13px; }
  .g-backgammon .prow .pname small { font-size: 11px; }
  .g-backgammon .bg-offx { display: none; }
}

/* ---------- frame: thick walnut rails with a bevel ---------- */
.g-backgammon .bg-frame {
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 225, 190, .035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #6a4026 0%, #54301b 45%, #3f2313 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 214, 170, .30),
    inset 0 -3px 0 rgba(0, 0, 0, .45),
    inset 2px 0 0 rgba(255, 214, 170, .10),
    inset -2px 0 0 rgba(0, 0, 0, .25),
    0 1px 0 rgba(0, 0, 0, .7),
    0 14px 30px -12px rgba(0, 0, 0, .9),
    0 3px 8px rgba(0, 0, 0, .5);
}

/* ---------- recessed playing field ---------- */
.g-backgammon .bg-field, .g-backgammon .bg-tray {
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 220, 180, .025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 13px),
    radial-gradient(120% 80% at 50% 50%, #3a2316, #2a170d 70%, #22130a);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, .75),
    inset 0 -2px 4px rgba(0, 0, 0, .45),
    inset 3px 0 6px rgba(0, 0, 0, .45),
    inset -3px 0 6px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    0 1px 0 rgba(255, 214, 170, .16),
    0 -1px 0 rgba(0, 0, 0, .35);
}
.g-backgammon .bg-tray { background: radial-gradient(140% 70% at 50% 50%, #2a170d, #1c0f07 80%); }
.g-backgammon .bg-tray::after {
  content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 1px;
  background: rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 214, 170, .1);
}

/* ---------- raised hinge bar with brass plates ---------- */
.g-backgammon .bg-barc {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, #2f190c 0%, #5c3620 22%, #74472b 48%, #5c3620 74%, #2c170b 100%);
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 214, 170, .22), inset 0 -2px 0 rgba(0, 0, 0, .4);
  z-index: 1;
}
.g-backgammon .bg-hinge {
  z-index: 1; border-radius: 2px;
  background: linear-gradient(90deg, #6d5122 0%, #c9a65a 30%, #f1d897 48%, #b8913f 62%, #6a4c1c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 245, 210, .6), inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.g-backgammon .bg-hinge::before, .g-backgammon .bg-hinge::after {
  content: ""; position: absolute; left: 50%; width: 30%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f6e2a8, #8a6a2c 70%);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .5);
}
.g-backgammon .bg-hinge::before { top: 12%; }
.g-backgammon .bg-hinge::after { bottom: 12%; }

/* ---------- inlaid points ---------- */
.g-backgammon .bg-tri, .g-backgammon .bg-well, .g-backgammon .bg-dst, .g-backgammon .bg-land, .g-backgammon .bg-tray-dst { pointer-events: none; }
.g-backgammon .bg-tri.top, .g-backgammon .bg-dst.top { clip-path: polygon(5% 0, 95% 0, 50% 100%); }
.g-backgammon .bg-tri.bot, .g-backgammon .bg-dst.bot { clip-path: polygon(50% 0, 95% 100%, 5% 100%); }
.g-backgammon .bg-tri { background: rgba(10, 4, 1, .75); } /* the inlay seam */
.g-backgammon .bg-tri::before { content: ""; position: absolute; inset: 0; }
.g-backgammon .bg-tri.top::before { clip-path: polygon(11% 0, 89% 0, 50% 96.5%); }
.g-backgammon .bg-tri.bot::before { clip-path: polygon(50% 3.5%, 89% 100%, 11% 100%); }
.g-backgammon .bg-tri.a::before {
  background: linear-gradient(90deg, rgba(255, 240, 215, .14), transparent 45%, rgba(0, 0, 0, .14)),
    linear-gradient(var(--tri-dir, 180deg), #c99d6b, #a87c4e 70%, #8f6640);
}
.g-backgammon .bg-tri.b::before {
  background: linear-gradient(90deg, rgba(255, 220, 200, .10), transparent 45%, rgba(0, 0, 0, .18)),
    linear-gradient(var(--tri-dir, 180deg), #84342a, #6a261d 70%, #561c15);
}
.g-backgammon .bg-tri.bot { --tri-dir: 0deg; }

/* checker wells: shallow round depressions along every point */
.g-backgammon .bg-well {
  border-radius: 50%; transform: scale(.94);
  background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .2), rgba(0, 0, 0, .1) 62%, rgba(0, 0, 0, 0) 72%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .34), inset 0 -1px 1px rgba(255, 225, 190, .12);
}

/* destinations: the point brightens a little and the landing well glows */
.g-backgammon .bg-dst { background: linear-gradient(var(--tri-dir, 180deg), rgba(255, 228, 180, .30), rgba(255, 228, 180, .12)); }
.g-backgammon .bg-dst.bot { --tri-dir: 0deg; }
.g-backgammon .bg-land {
  border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, rgba(255, 232, 190, .42), rgba(255, 220, 160, .16) 62%, transparent 72%);
  box-shadow: 0 0 0 1.5px rgba(255, 226, 170, .55), 0 0 10px 1px rgba(255, 205, 130, .35);
  animation: bg-breathe 1.4s ease-in-out infinite alternate;
}
.g-backgammon .bg-land.ring { background: none; z-index: 3; }
.g-backgammon .bg-land.slab { border-radius: 3px; }
.g-backgammon .bg-tray-dst {
  border-radius: 4px; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 228, 180, .26), rgba(255, 228, 180, .07));
  box-shadow: inset 0 0 0 1.5px rgba(255, 226, 170, .55), 0 0 10px rgba(255, 205, 130, .25);
}
@keyframes bg-breathe { from { opacity: .6; } to { opacity: 1; } }

/* ---------- checkers: turned discs with a rim and a groove ---------- */
.g-backgammon .bg-ck {
  border-radius: 50%; pointer-events: none; display: grid; place-items: center; z-index: 2;
  transition: transform .18s var(--ease-out);
}
.g-backgammon .bg-ck::before { content: ""; position: absolute; inset: 21%; border-radius: 50%; }
.g-backgammon .bg-ck.w {
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 50%, #f7eedd 0 56%, #d8c4a0 60%, #efe2c8 66%, #e6d5b6 82%, #b49a72 100%);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .45), 0 4px 7px -2px rgba(0, 0, 0, .55),
    inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -2px 2px rgba(110, 80, 40, .35);
}
.g-backgammon .bg-ck.w::before { box-shadow: inset 0 1px 1.5px rgba(90, 60, 25, .35), 0 1px 0 rgba(255, 255, 255, .55); }
.g-backgammon .bg-ck.b {
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 50%, #2b2b30 0 56%, #121214 60%, #34343a 66%, #222226 82%, #0b0b0c 100%);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .55), 0 4px 7px -2px rgba(0, 0, 0, .65),
    inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -2px 2px rgba(0, 0, 0, .5);
}
.g-backgammon .bg-ck.b::before { box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .1); }
.g-backgammon .bg-ck b {
  position: relative; font-size: clamp(9px, 2.5vw, 14px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.g-backgammon .bg-ck.w b { color: #5a4126; }
.g-backgammon .bg-ck.b b { color: #efe4d0; }
.g-backgammon .bg-ck.can::after, .g-backgammon .bg-ck.sel::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
}
.g-backgammon .bg-ck.can::after { box-shadow: 0 0 0 1.5px rgba(255, 222, 160, .6), 0 0 8px 1px rgba(255, 196, 110, .35); }
.g-backgammon .bg-ck.sel { transform: translateY(-1px) scale(1.07); z-index: 4; }
.g-backgammon .bg-ck.sel::after { box-shadow: 0 0 0 2px rgba(255, 226, 170, .95), 0 0 14px 3px rgba(255, 190, 100, .5); }
.g-backgammon .bg-ghost { z-index: 6; will-change: transform, opacity; }

/* ---------- bear-off tray: checkers standing on edge ---------- */
.g-backgammon .bg-slab { border-radius: 2.5px; pointer-events: none; z-index: 2; }
.g-backgammon .bg-slab.w {
  background: linear-gradient(180deg, #fffaf0 0%, #eadbbd 35%, #cdb48b 70%, #a58a62 100%);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .6), inset 0 0 0 .5px rgba(90, 60, 25, .35);
}
.g-backgammon .bg-slab.b {
  background: linear-gradient(180deg, #55555c 0%, #2a2a2f 35%, #17171a 70%, #0b0b0c 100%);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .12);
}
.g-backgammon .bg-offn {
  display: grid; place-items: center; pointer-events: none; z-index: 1;
  font-size: clamp(10px, 2.8vw, 14px); font-weight: 800; color: #f1e3c8; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
.g-backgammon .bg-offn.op { color: rgba(241, 227, 200, .55); }

/* ---------- dice thrown onto the board (physics in stage3d) ---------- */
.g-backgammon .bg-throw { z-index: 5; pointer-events: none; overflow: hidden; border-radius: 4px; }
.g-backgammon .bg-throw .dice-tray { width: 100%; height: 100%; border-radius: 4px; }
.g-backgammon .bg-throw .tray-fb { gap: 8px; }

/* ---------- centre note ---------- */
.g-backgammon .bg-note {
  transform: translate(-50%, -50%); z-index: 6; pointer-events: none; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: rgba(20, 12, 7, .9); color: #f4e8d4;
  font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 214, 170, .15);
  animation: bg-in .25s var(--ease-out) both;
}
.g-backgammon .bg-note.mars { background: var(--red-grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(var(--red-rgb), .8); }
@keyframes bg-in { from { opacity: 0; transform: translate(-50%, -40%); } }

/* ---------- tap targets ---------- */
.g-backgammon .bg-hit { z-index: 7; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 4px; }
.g-backgammon .bg-hit:focus-visible { outline: 2px solid rgba(255, 226, 170, .5); outline-offset: -2px; }

/* ---------- text around the board ---------- */
.g-backgammon .bg-sub { display: inline-flex; align-items: center; white-space: nowrap; }
.g-backgammon .bg-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 6px; }
.g-backgammon .bg-offx { white-space: pre; }
.g-backgammon .bg-sw.w { background: radial-gradient(circle at 40% 35%, #fffaf0, #d8c4a0); }
.g-backgammon .bg-sw.b { background: radial-gradient(circle at 40% 35%, #4a4a50, #121214); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.g-backgammon .bg-info { flex: none; display: flex; align-items: center; gap: 10px; height: var(--info-h); padding: 0 2px; }
.g-backgammon .bg-lines { flex: 1; min-width: 0; display: grid; gap: 1px; }
.g-backgammon .bg-status {
  display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.3;
}
.g-backgammon .bg-status > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-backgammon .bg-status b { color: var(--ink); font-weight: 700; }
.g-backgammon .bg-status .timer { flex: none; font-size: 12px; }
.g-backgammon .bg-warn { color: var(--lose); }
.g-backgammon .bg-pips { color: var(--dim); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; }
.g-backgammon .bg-undo { flex: none; min-width: 0; }
.g-backgammon .bg-undo .btn.sm { height: 32px; }

@media (prefers-reduced-motion: reduce) {
  .g-backgammon .bg-note, .g-backgammon .bg-land { animation: none; }
}