/* ---------- TABLA BOARD ---------- */
/* walnut case with gold inlay, two felt fields, brass and garnet points, ivory vs onyx checkers */
.tbwrap{container-type:inline-size; position:relative; width:100%; max-width:740px; align-self:center; margin-block:4px}
.tbb{--ck:calc(100cqw / 15.2); --cs:calc(var(--ck) * .92); --wood:#4a2d12; --wood2:#2a180a;
  --pa:linear-gradient(180deg,#f2c35a,#a8680f); --pb:linear-gradient(180deg,#c43a4c,#6a1222);
  position:relative; display:grid; box-sizing:border-box;
  grid-template-columns:repeat(6,var(--ck)) calc(var(--ck)*1.2) repeat(6,var(--ck)) calc(var(--ck)*1.3);
  grid-template-rows:calc(var(--ck)*5.1) calc(var(--ck)*1.7) calc(var(--ck)*5.1);
  padding:calc(var(--ck)*.35); border-radius:calc(var(--ck)*.55);
  background:repeating-linear-gradient(97deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px), linear-gradient(180deg,var(--wood),var(--wood2));
  box-shadow:0 0 0 2px var(--gold3), 0 0 0 4px var(--gold), 0 22px 46px var(--shade), inset 0 2px 0 rgba(255,255,255,.08)}
.fld{grid-row:1/4; border-radius:calc(var(--ck)*.18); background:radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-deep) 95%); box-shadow:inset 0 0 0 1px rgba(255,197,61,.35), inset 0 0 28px rgba(0,0,0,.45)}
.fld.l{grid-column:1/7} .fld.r{grid-column:8/14}
.barc{grid-area:1/7/4/8; margin-inline:calc(var(--ck)*.12); border-radius:4px; background:linear-gradient(90deg,var(--wood2),var(--wood) 50%,var(--wood2)); box-shadow:inset 0 0 0 1px rgba(255,197,61,.25)}
.trayc{grid-area:1/14/4/15; margin-left:calc(var(--ck)*.18); border-radius:4px; background:rgba(0,0,0,.28)}
.pt,.barp,.tray{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:0; padding:2px 0; margin:0; border:0; background:none; cursor:default; min-width:0; overflow:visible; -webkit-tap-highlight-color:transparent}
.pt::before{content:''; position:absolute; left:5%; right:5%; top:0; height:93%; clip-path:polygon(0 0,100% 0,50% 100%); background:var(--pa); opacity:.92; transition:filter .2s}
.pt.pb::before{background:var(--pb)}
.pt.b{flex-direction:column-reverse}
.pt.b::before{top:auto; bottom:0; clip-path:polygon(50% 0,100% 100%,0 100%)}
.pt.src,.pt.dst,.barp.src,.tray.dst{cursor:pointer}
.pt.src,.barp.src{touch-action:none}
.pt.dst::before{filter:brightness(1.45) saturate(1.2)}
.pt:focus-visible,.barp:focus-visible,.tray:focus-visible{outline:2px solid var(--gold); outline-offset:-2px; border-radius:4px}
.barp{grid-column:7; justify-content:flex-end; padding:4px 0}
.barp.t{grid-row:1} .barp.b{grid-row:3; justify-content:flex-start}
.barp .ck+.ck{margin-top:calc(var(--cs)*-.4)}
.tray{grid-column:14; margin-left:calc(var(--ck)*.18); padding:3px; box-sizing:border-box; gap:1px; border-radius:4px}
.tray.t{grid-row:1} .tray.b{grid-row:3; flex-direction:column-reverse}
.tray.dst{box-shadow:inset 0 0 0 2px var(--gold), 0 0 16px rgba(255,197,61,.6); animation:ghost 1.2s ease-in-out infinite}
.slab{display:block; width:100%; height:calc((var(--ck)*5.1 - 22px) / 15); border-radius:2px; flex:none}
.slab.c0{background:linear-gradient(180deg,#fffaf0,#d6c39a)}
.slab.c1{background:linear-gradient(180deg,#4a4f5e,#0c0d12); box-shadow:inset 0 0 0 1px rgba(255,197,61,.4)}

.ck{position:relative; z-index:1; display:grid; place-items:center; flex:none; width:var(--cs); height:var(--cs); border-radius:50%; font-style:normal; transition:translate .15s ease}
.ck::after{content:''; position:absolute; inset:22%; border-radius:50%; border:1.5px solid rgba(0,0,0,.14)}
.ck.c0{background:radial-gradient(circle at 34% 28%, #ffffff 0%, #f4ecda 38%, #cdb88a 100%); box-shadow:inset 0 -2px 3px rgba(90,58,20,.35), 0 2px 3px rgba(0,0,0,.5)}
.ck.c1{background:radial-gradient(circle at 34% 28%, #5f6577 0%, #23262f 45%, #0b0c10 100%); box-shadow:inset 0 0 0 1.5px rgba(255,197,61,.6), 0 2px 3px rgba(0,0,0,.6)}
.ck.c1::after{border-color:rgba(255,197,61,.35)}
.ck b{position:relative; z-index:2; font:700 calc(var(--cs)*.5)/1 var(--num); color:var(--ink)}
.ck.c1 b{color:var(--gold)}
.src .ck.top{box-shadow:0 0 0 2px var(--gold), 0 0 10px rgba(255,197,61,.55), 0 2px 3px rgba(0,0,0,.5)}
.pt.t.sel .ck.top{translate:0 4px} .pt.b.sel .ck.top,.barp.sel .ck.top{translate:0 -4px}
.sel .ck.top{box-shadow:0 0 0 3px var(--gold), 0 0 18px 4px rgba(255,197,61,.7), 0 6px 8px rgba(0,0,0,.5)}
.ck.ghost{background:none; box-shadow:inset 0 0 0 2px var(--gold), 0 0 12px rgba(255,197,61,.6); animation:ghost 1.2s ease-in-out infinite}
.ck.ghost::after{display:none}
@keyframes ghost{50%{opacity:.45}}
.ck.drag{position:fixed; z-index:90; pointer-events:none; transform:translate(-50%,-50%) scale(1.18); box-shadow:0 0 0 3px var(--gold), 0 14px 24px rgba(0,0,0,.55)}

.dz{grid-row:1/4; z-index:5; display:flex; align-items:center; justify-content:center; gap:calc(var(--ck)*.3); pointer-events:none}
.dz.r{grid-column:8/14} .dz.l{grid-column:1/7}
.dz .btn{pointer-events:auto; font-size:clamp(14px,3.6cqw,17px); padding:10px 18px; display:inline-flex; align-items:center; gap:8px}
.die{--d:calc(var(--ck)*1.3); width:var(--d); height:var(--d); box-sizing:border-box; padding:calc(var(--d)*.12); border-radius:22%; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); background:linear-gradient(145deg,#fffdf7,#e4dac4); box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.5); transition:opacity .25s, scale .25s}
.dz.four .die{--d:calc(var(--ck)*1.02)}
.die i{margin:14%; border-radius:50%; background:var(--ink); visibility:hidden}
.die.dk{background:linear-gradient(145deg,#3a3f50,#101218); box-shadow:inset 0 0 0 1.5px rgba(255,197,61,.5), 0 6px 12px rgba(0,0,0,.5)}
.die.dk i{background:var(--gold)}
.die.d1 i:nth-child(5),
.die.d2 i:nth-child(1),.die.d2 i:nth-child(9),
.die.d3 i:nth-child(1),.die.d3 i:nth-child(5),.die.d3 i:nth-child(9),
.die.d4 i:nth-child(1),.die.d4 i:nth-child(3),.die.d4 i:nth-child(7),.die.d4 i:nth-child(9),
.die.d5 i:nth-child(1),.die.d5 i:nth-child(3),.die.d5 i:nth-child(5),.die.d5 i:nth-child(7),.die.d5 i:nth-child(9),
.die.d6 i:nth-child(1),.die.d6 i:nth-child(3),.die.d6 i:nth-child(4),.die.d6 i:nth-child(6),.die.d6 i:nth-child(7),.die.d6 i:nth-child(9){visibility:visible}
.die.used{opacity:.25; scale:.82}
.die.roll{animation:tumble .32s linear infinite}
.die.roll:nth-child(2){animation-direction:reverse}
@keyframes tumble{0%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-14%) rotate(90deg)} 50%{transform:translateY(0) rotate(180deg)} 75%{transform:translateY(-8%) rotate(270deg)} 100%{transform:translateY(0) rotate(360deg)}}
.tbwrap .overlay{inset:-8px; border-radius:24px}
.tbacts{display:flex; gap:8px; justify-content:center; min-height:38px}
.mars{display:inline-block; padding:2px 10px; border-radius:99px; background:var(--hearts); color:var(--paper); font:700 13px var(--num); letter-spacing:.08em; text-transform:uppercase}