/* Backgammon: drvena tabla sa trouglovima (SVG), kamenovi koji klize, 2D kockice u prolazu, kocka za dupliranje. Ostalo je iz base.css i die.css. */
.is-game .felt.backgammon{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.bgwrap{position:absolute;inset:0}
.bgboard{position:absolute;border-radius:calc(var(--w) * .3);
  background:var(--wood),linear-gradient(160deg,#8a5527,#5a3518);background-size:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,230,180,.35),inset 0 -2px 0 rgba(0,0,0,.35)}
.bgsvg{position:absolute;inset:0;pointer-events:none}
.bgsvg svg{display:block}
.bgnum{fill:rgba(255,236,200,.62);font-family:var(--sans);font-weight:700}
/* polja, bar i korito su dugmad preko crteža */
.bgpt,.bgbar,.bgtray{position:absolute;z-index:4;border-radius:6px}
.bgpt.src,.bgpt.tgt,.bgbar.src,.bgtray.tgt{cursor:pointer}
.bgpt:focus-visible,.bgbar:focus-visible,.bgtray:focus-visible{outline:3px solid var(--brass-hi);outline-offset:-3px}
.bgpt.tgt{background:rgba(240,212,145,.16);box-shadow:inset 0 0 0 2px rgba(240,212,145,.55)}
.bgpt.tgt.far{background:rgba(240,212,145,.08);box-shadow:inset 0 0 0 2px rgba(240,212,145,.3)}
.bgpt.sel,.bgbar.sel{box-shadow:inset 0 0 0 2px var(--brass-hi)}
.bgtray.tgt{background:rgba(240,212,145,.2);box-shadow:inset 0 0 0 3px var(--brass-hi)}
.bgpt.hint,.bgbar.hint,.bgtray.hint{box-shadow:inset 0 0 0 3px #8ee09b;background:rgba(142,224,155,.14)}
.bgpt.nope,.bgbar.nope,.bgtray.nope{animation:bgnope .3s}
@keyframes bgnope{25%{translate:-4px 0}75%{translate:4px 0}}
/* kamen */
.bgck{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;z-index:10;
  transition:transform .3s cubic-bezier(.3,.7,.3,1),width .3s,height .3s,border-radius .3s}
.bgck.s0{background:radial-gradient(circle at 35% 30%,#fffdf6,#ece4cf 55%,#c9bd9c);box-shadow:0 calc(var(--d) * .06) calc(var(--d) * .1) rgba(0,0,0,.5),inset 0 calc(var(--d) * -.05) 0 rgba(0,0,0,.18)}
.bgck.s1{background:radial-gradient(circle at 35% 30%,#5b4d48,#2a1f1c 55%,#120c0a);box-shadow:0 calc(var(--d) * .06) calc(var(--d) * .1) rgba(0,0,0,.55),inset 0 calc(var(--d) * -.05) 0 rgba(0,0,0,.35)}
.bgck::after{content:'';position:absolute;inset:18%;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(127,110,90,.35)}
.bgck.s1::after{box-shadow:inset 0 0 0 1.5px rgba(200,170,140,.22)}
.bgck[data-n]:not([data-n=""])::before{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;font:800 calc(var(--d) * .42) var(--sans);z-index:1}
.bgck.s0[data-n]::before{color:#3a2a1a}
.bgck.s1[data-n]::before{color:#f1e4c8}
.bgck.lift{box-shadow:0 0 0 3px var(--brass-hi),0 10px 18px rgba(0,0,0,.5)}
/* skinut kamen: tanka pločica u koritu */
.bgck.slab{border-radius:3px}
.bgck.slab::after{display:none}
.bgboard.still .bgck{transition:none}
/* polja čiji kamen može da se pomeri: svetla crta uz ivicu odakle kamenovi kreću (gore, dole; na telefonu levo, desno) */
.bgpt.src::after,.bgbar.src::after{content:'';position:absolute;pointer-events:none;border-radius:2px;background:rgba(240,212,145,.75);box-shadow:0 0 8px rgba(240,212,145,.6)}
.bgpt.src[data-row="t"]::after{left:18%;right:18%;top:2px;height:3px}
.bgpt.src[data-row="b"]::after,.bgbar.src::after{left:18%;right:18%;bottom:2px;height:3px}
.bgboard.portrait .bgpt.src[data-row="t"]::after{top:18%;bottom:18%;left:auto;right:2px;width:3px;height:auto}
.bgboard.portrait .bgpt.src[data-row="b"]::after{top:18%;bottom:18%;left:2px;right:auto;width:3px;height:auto}
.bgghost{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;z-index:9;opacity:.5;box-shadow:0 0 0 2px var(--brass-hi)}
.bgghost.s0{background:radial-gradient(circle at 35% 30%,#fffdf6,#d9cfb5)}
.bgghost.s1{background:radial-gradient(circle at 35% 30%,#5b4d48,#1d1513)}
.bgghost.far{opacity:.28}
/* kockice */
.bgdice{position:absolute;left:0;top:0;z-index:30;display:flex;gap:calc(var(--ds) * .22);pointer-events:none}
.bgdice .die2d{--s:var(--ds)}
.bgdice.col{flex-direction:column}
.bgdice .die2d{cursor:inherit;box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 -3px 0 rgba(0,0,0,.12),inset 0 1px 0 #fff}
.bgdice .die2d:hover{transform:none}
.bgdice .die2d.used{opacity:.42;filter:grayscale(.3)}
/* kocka za dupliranje */
.bgcube{position:absolute;left:0;top:0;z-index:32;display:grid;place-items:center;border-radius:18%;cursor:pointer;
  background:linear-gradient(145deg,#fbf6e8,#d9cdb0);color:#3a2414;font-family:var(--serif);font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 -3px 0 rgba(0,0,0,.15);transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.bgcube.offer{box-shadow:0 0 0 3px var(--brass-hi),0 0 18px rgba(240,212,145,.7);animation:bgpulse 1.2s infinite}
.bgcube.crawford{opacity:.45}
@keyframes bgpulse{50%{scale:1.1}}
.bgcube:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}
/* pločice igrača */
.bgplate{position:absolute;left:0;top:0;z-index:40;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:40px;padding:7px 12px;border-radius:20px;
  background:rgba(20,10,4,.72);border:1px solid rgba(212,176,106,.3);box-shadow:0 6px 14px rgba(0,0,0,.35);font-size:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.bgplate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9em}
.bgplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.bgplate .st{font-size:13px;font-weight:700;color:var(--brass-hi)}
.bgplate .sc{padding:2px 8px;border-radius:12px;border:1px solid rgba(212,176,106,.4);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.bgplate .cube{padding:2px 7px;border-radius:5px;background:#efe5cc;color:#3a2414;font-weight:800;font-size:12px;white-space:nowrap}
.bgplate .cnt{margin-left:auto;min-width:40px;text-align:center;padding:2px 9px;border-radius:12px;background:rgba(255,255,255,.1);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.bgplate.turn{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.25),0 6px 14px rgba(0,0,0,.35)}
.bgdot{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.bgdot.s0{background:radial-gradient(circle at 35% 30%,#fffdf6,#cfc5a8)}
.bgdot.s1{background:radial-gradient(circle at 35% 30%,#5b4d48,#120c0a)}
@media (max-width:640px){
  .bgplate{min-height:0;padding:0 10px;gap:6px;font-size:12px;flex-wrap:nowrap}
  .bgplate>*{flex:none}
  .bgplate .st{flex:1 1 auto}
  .bgplate b{font-size:13px;max-width:6em}
  .bgplate small{display:none}
  .bgplate .st{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .bgplate .cnt{font-size:14px;min-width:34px}
  .bgplate .sc{font-size:12px;padding:1px 6px}
}
/* rezultat meča u lampi */
.bgscore{width:100%;border-collapse:collapse;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.bgscore th,.bgscore td{padding:6px 8px;text-align:center;border-bottom:1px solid rgba(212,176,106,.2)}
.bgscore td:first-child,.bgscore th:first-child{text-align:left;color:var(--cream-3)}
.bgscore tr.tot td{font-weight:800;color:var(--cream);border-bottom:0}
/* imena za dvoje na uređaju */
.bgnames{display:grid;gap:10px;padding:4px 0 8px}
.bgnames label{display:flex;align-items:center;gap:10px}
.bgnames input{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid var(--brass-dim);background:rgba(0,0,0,.28);color:var(--cream);font:600 16px var(--sans);padding:0 12px}
.bgnames .bgdot{width:24px;height:24px}
/* poruka ide gore: dole je moja pločica */
.toast{bottom:auto;top:calc(var(--bar) + 14px);transform:translate(-50%,-20px)}
.toast.on{transform:translate(-50%,0)}