/* HAKOO dice (js/shared/dice.js): the table, the 3D dice and the dice cup.
   The script sets --die (die size), --rim (wooden rim), --cup (cup size) and the 3D transforms. */

.dice-tray{position:relative;width:100%;overflow:hidden;user-select:none;-webkit-user-select:none;border-radius:14px;outline:none}
.dice-tray:focus-visible{box-shadow:0 0 0 2px var(--blue)}

/* The table: green felt in a wooden rim, tilted away from the player. */
.dice-table{position:absolute;box-sizing:border-box;transform-style:preserve-3d;border:var(--rim) solid #5b3a20;border-radius:16px;
  background:radial-gradient(ellipse at 50% 38%,#33845a 0%,#1f5a38 62%,#163f28 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 calc(var(--die)*.7) rgba(0,0,0,.5),0 0 0 2px #2c1a0d}

/* A die: a point in the table's 3D space with six faces around it. */
.die{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:opacity .2s}
.die-face,.die-core{position:absolute;width:var(--die);height:var(--die);left:calc(var(--die) / -2);top:calc(var(--die) / -2)}
.die-face{box-sizing:border-box;border-radius:17%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 35% 30%,#fffdf7,#f4efe3 60%,#e6dfcf);
  box-shadow:inset 0 0 calc(var(--die)*.08) rgba(120,100,70,.45)}
.die-core{background:#e3dccb;transform-style:preserve-3d;width:calc(var(--die) * .94);height:calc(var(--die) * .94);
  left:calc(var(--die) * -.47);top:calc(var(--die) * -.47)}
.pip{position:absolute;width:19%;height:19%;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 35%,#4a4a4a,#111 70%);box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 .5px 0 rgba(255,255,255,.7)}
.die-face[data-value="1"] .pip{width:24%;height:24%;background:radial-gradient(circle at 40% 35%,#e0484c,#9e1015 70%)}
.shade{position:absolute;inset:0;border-radius:inherit;background:#000;opacity:0;pointer-events:none}
.die-shadow{position:absolute;left:50%;top:50%;width:calc(var(--die) * 1.35);height:calc(var(--die) * 1.35);
  margin:calc(var(--die) * -.675) 0 0 calc(var(--die) * -.675);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.25) 60%,rgba(0,0,0,0));transition:opacity .2s}
.die.hidden,.die-shadow.hidden{display:none}
.die.gather,.die-shadow.gather{opacity:0!important}

/* The cup: drawn flat in front of the table; it follows the pointer and tips over to pour. */
.dice-cup{position:absolute;z-index:2;width:var(--cup);height:calc(var(--cup) * 1.12);cursor:grab;touch-action:none;
  transform:translate(-50%,-62%) translate(var(--jx,0px),var(--jy,0px)) rotate(var(--rot,0deg));transform-origin:50% 92%;
  transition:transform .1s,opacity .3s;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.dice-cup.held{cursor:grabbing;transition:opacity .3s}
.dice-cup.knock{animation:dice-knock .09s}
@keyframes dice-knock{50%{translate:0 2px}}
.dice-cup.pour{transform:translate(-50%,-62%) rotate(var(--pour,110deg));opacity:0;transition:transform .22s ease-in,opacity .3s .12s;pointer-events:none}
.cup-body{position:absolute;left:7%;right:7%;top:12%;bottom:0;border-radius:8% 8% 24% 24% / 5% 5% 12% 12%;
  background:linear-gradient(90deg,#341b0d,#7d4d2c 22%,#b07a50 38%,#8d5a36 55%,#5e351d 80%,#2b160a)}
.cup-band{position:absolute;left:7%;right:7%;height:7%;top:66%;background:linear-gradient(90deg,#5a4410,#d9b24a 38%,#f1d27a 45%,#8a6a1c 80%,#4a380c)}
.cup-band::before{content:'';position:absolute;left:0;right:0;top:-260%;height:60%;background:inherit;opacity:.8}
.cup-rim{position:absolute;left:0;right:0;top:2%;height:22%;border-radius:50%;
  background:radial-gradient(closest-side,#0e0603 0 70%,#4a2a16 74%,#c58f61 80%,#7a4a2c 92%,#3e2313 100%)}
.dice-tray.cup-full .cup-rim::after{content:'';position:absolute;inset:26% 24%;border-radius:50%;
  background:radial-gradient(circle at 30% 55%,#f3eee2 0 17%,transparent 19%),radial-gradient(circle at 66% 42%,#e9e2d2 0 15%,transparent 17%),radial-gradient(circle at 50% 70%,#d8d0bd 0 12%,transparent 14%)}
.dice-tray[data-mode="button"] .dice-cup{display:none}
.dice-tray.locked .dice-cup{opacity:.45;cursor:not-allowed}

@media (prefers-reduced-motion:reduce){.dice-cup,.dice-cup.pour{transition:none}}