/* Kockica na stolu (2D): zajednička za sve igre sa kockicama (client/table/dice.ts). Veličina: --s u igri. */
.die2d{--s:clamp(54px,9vw,72px);width:var(--s);height:var(--s);border:0;border-radius:calc(var(--s)*.2);padding:calc(var(--s)*.14);cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fffdf6,#efe5cf);box-shadow:0 6px 12px rgba(0,0,0,.4),inset 0 -4px 0 rgba(0,0,0,.12),inset 0 1px 0 #fff;transition:transform .2s,box-shadow .2s}
.die2d .pips{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:100%;height:100%}
.die2d i{width:calc(var(--s)*.15);height:calc(var(--s)*.15);border-radius:50%;place-self:center;background:radial-gradient(circle at 35% 35%,#3a3430,#0e0c0b)}
.die2d[data-v="1"] i{width:calc(var(--s)*.22);height:calc(var(--s)*.22);background:radial-gradient(circle at 35% 35%,#c0303a,#6e0d16)}
.die2d i.off{visibility:hidden}
.die2d:hover{transform:translateY(-3px)}
.die2d.held{box-shadow:0 0 0 3px var(--brass-hi),0 8px 16px rgba(0,0,0,.45),inset 0 -4px 0 rgba(0,0,0,.12)}
.die2d.blank{opacity:.5}
.die2d.rolling{animation:tumble .5s cubic-bezier(.3,.7,.3,1)}
@keyframes tumble{0%{transform:translate(var(--rx),-40px) rotate(var(--rr)) scale(1.1)}70%{transform:translate(0,4px) rotate(8deg)}100%{transform:none}}