/* ================= GGGL Backgammon (përdor edhe stilet e hollit dhe të shiritave nga chess.css) ================= */
.howto { margin-top: 32px; }
.howto h2 { font: 700 20px/1.2 var(--display); margin: 0 0 12px; }
.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.howto-grid div { padding: 14px 16px; border-radius: var(--r-sm); background: var(--deck); border: 1px solid var(--rail); }
.howto-grid p { margin: 6px 0 0; color: var(--haze); font-size: 14px; line-height: 1.5; }
.bg-page #quick { margin-top: auto; }
.bg-art { position: relative; margin: 4px auto; }
.bg-art svg { width: 200px; height: auto; border-radius: 10px; box-shadow: 0 14px 26px -16px rgba(0,0,0,.9); }
.mini-die { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 5px; background: #F7F3EA; box-shadow: inset 0 -2px 3px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.5); }
.mini-die::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #151827 2.6px, transparent 3px) 25% 25% / 50% 50%; }
.mini-die.d1 { left: 38%; transform: translateY(-50%) rotate(-14deg); }
.mini-die.d2 { left: 53%; transform: translateY(-40%) rotate(18deg); }
.mode-card:hover .mini-die.d1 { animation: minir 1s cubic-bezier(.2,.7,.3,1); }
.mode-card:hover .mini-die.d2 { animation: minir 1.1s cubic-bezier(.2,.7,.3,1) reverse; }
@keyframes minir { 0% { transform: translate(-30px, -60%) rotate(-340deg); } 60% { transform: translate(4px, -50%) rotate(20deg); } }

/* ---------- Tabela ---------- */
.bg-page .board-col { width: min(100%, 920px, calc((100dvh - 250px) * 1.372)); }
.bwrap { aspect-ratio: 1605 / 1170; border-radius: 18px; background: #0B1026; overflow: visible; }
.bwrap.b3d { background: radial-gradient(120% 90% at 50% 30%, #26306A 0%, #141A3E 55%, #0B1026 100%); overflow: hidden; }
#board { width: 100%; height: 100%; }
.board3d { width: 100%; height: 100%; }
.board3d canvas { display: block; width: 100% !important; height: 100% !important; }

.bg2d { position: relative; width: 100%; height: 100%; container-type: inline-size; user-select: none; -webkit-user-select: none; }
.bgsvg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.pnum { fill: #E3C07A; font: 800 24px/1 var(--body); text-anchor: middle; dominant-baseline: central; }
.ck { transition: filter .15s; }
.ck.flying { filter: drop-shadow(0 18px 12px rgba(0,0,0,.55)); }
.ck.lifted circle:first-child { filter: drop-shadow(0 0 12px rgba(255,194,75,.95)); }
.marks { pointer-events: none; }
.src { fill: none; stroke: #FFC24B; stroke-width: 6; animation: bgpulse 1.1s ease-in-out infinite; }
.src.sel { stroke: #FFE39A; stroke-width: 10; animation: none; }
.tgt { fill: rgba(127,233,255,.42); animation: bgglow 1.1s ease-in-out infinite; pointer-events: none; }
.ghost { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.75); stroke-width: 4; stroke-dasharray: 12 9; }
@keyframes bgpulse { 50% { stroke-opacity: .45; } }
@keyframes bgglow { 50% { fill: rgba(127,233,255,.2); } }

/* zaret 2D: kube CSS 3D */
.dice2d { --ds: max(24px, 5.4cqw); position: absolute; top: 50%; display: flex; gap: calc(var(--ds) * .28); transform: translate(-50%, -50%); pointer-events: none; }
.die { position: relative; width: var(--ds); height: var(--ds); perspective: calc(var(--ds) * 8); transition: opacity .25s, filter .25s; }
.die.used { opacity: .42; filter: grayscale(.7); }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.df {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 13%;
  border-radius: 20%; background: radial-gradient(circle at 32% 28%, #FFFFFF, #F2ECDD 60%, #D8D0BC);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -3px 5px rgba(0,0,0,.14);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.die.p1 .df { background: radial-gradient(circle at 32% 28%, #3A4170, #1C1F33 60%, #0D0F1C); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -3px 5px rgba(0,0,0,.4); }
.df i { width: 74%; aspect-ratio: 1; place-self: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3A4270, #0B1026 70%); }
.die.p1 .df i { background: radial-gradient(circle at 35% 30%, #FFE08A, #C9922A 75%); }
.f1 i { background: radial-gradient(circle at 35% 30%, #FF7A8A, #C7263F 70%); width: 92%; }
.die.p1 .f1 i { background: radial-gradient(circle at 35% 30%, #FFE08A, #C9922A 75%); }
.df .tl { grid-area: 1 / 1; } .df .tr { grid-area: 1 / 3; } .df .ml { grid-area: 2 / 1; } .df .mr { grid-area: 2 / 3; }
.df .bl { grid-area: 3 / 1; } .df .br { grid-area: 3 / 3; } .df .c { grid-area: 2 / 2; }
.f1 { transform: translateZ(calc(var(--ds) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.f3 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.f2 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); }
.f5 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.die::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -14%; height: 16%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(3px); z-index: -1; }

/* ---------- Butonat e radhës ---------- */
.turn-actions { display: flex; gap: 8px; }
.turn-actions:not(:has(.btn:not([hidden]))) { display: none; }
.turn-actions .btn { flex: 1; padding: 14px 12px; font-size: 15px; }
.turn-actions .roll { font-size: 17px; padding: 16px; box-shadow: 0 12px 26px -12px rgba(108,140,255,.9); animation: rollhint 1.6s ease-in-out infinite; }
@keyframes rollhint { 50% { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(108,140,255,1); } }
.turn-actions .done { position: relative; overflow: hidden; }
.turn-actions .done span { position: relative; z-index: 1; }
.turn-actions .done.counting::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.35); transform-origin: left; animation: countdown var(--confirm, 2.2s) linear forwards; }
@keyframes countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* shiritat e lojtarëve: pips dhe gurët jashtë */
.bgstat { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--ink); white-space: nowrap; }
.bgstat b { font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.bgstat small { color: var(--haze); font-size: 11px; font-weight: 700; margin-right: 4px; }
.bgstat small:last-child { margin-right: 0; }
.chip { width: 16px; height: 16px; border-radius: 50%; align-self: center; flex: none; margin-right: 3px; }
.chip.c0 { background: radial-gradient(circle at 35% 30%, #fff, #E9E5DA 55%, #B9B4A6); }
.chip.c1 { background: radial-gradient(circle at 35% 30%, #565C86, #20233A 55%, #0A0B14); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.pbar .tleft { font: 700 13px var(--display); color: var(--haze); min-width: 34px; text-align: right; }
.pbar.turn .tleft { color: var(--gold); }

@media (max-width: 1000px) { .howto-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .howto-grid { grid-template-columns: 1fr; }
  .bwrap { border-radius: 12px; }
  .bgstat { padding: 6px 9px 6px 6px; gap: 3px; }
  .bgstat b { font-size: 14px; }
  .bgstat small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .turn-actions .roll { animation: none; } }
body:has(#play:not([hidden])) .toast { top: 84px; bottom: auto; border-radius: 16px; transform: translate(-50%, -20px); }
body:has(#play:not([hidden])) .toast.show { transform: translate(-50%, 0); }

/* shenja GGGL në mes të tabelës hedh zaret kur është radha jote */
.rollring { fill: none; stroke: #FFC24B; stroke-width: 6; opacity: 0; }
.rollmark.ready { cursor: pointer; }
.rollmark.ready .rollring { opacity: 1; animation: rollpulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rollpulse { 50% { opacity: .35; transform: scale(1.14); } }