/* V1.15 top down dice presentation only. No board, header or match layout changes. */
#gameBoard > .dice-roll-overlay {
  --dr-size:64px; --dr-duration:2200ms;
  position:absolute; inset:0; z-index:12; pointer-events:none;
  display:grid; place-items:center; overflow:clip; border-radius:inherit;
  animation:drStageLife var(--dr-duration) linear both;
}
.dr-stage {
  --dr-face-hi:#ffffff; --dr-face-lo:#b2bdcc; --dr-pip:#101725;
  --dr-edge:rgba(255,255,255,.72); --dr-pip-light:rgba(14,25,37,.3);
  position:relative; width:calc(var(--dr-size)*6); height:calc(var(--dr-size)*3.8);
  pointer-events:none;
}
.dr-skin-gold { --dr-face-hi:#fff2b0; --dr-face-lo:#ae711b; --dr-pip:#342000; --dr-edge:#ffe59c; }
.dr-skin-neon { --dr-face-hi:#333e29; --dr-face-lo:#0a1012; --dr-pip:#cbff4a; --dr-edge:#78914d; --dr-pip-light:#b8ff4280; }
.dr-skin-ruby { --dr-face-hi:#b93552; --dr-face-lo:#350d1d; --dr-pip:#ffeff3; --dr-edge:#ff768f; --dr-pip-light:#ff9cb680; }
.dr-skin-cosmic { --dr-face-hi:#633992; --dr-face-lo:#110e27; --dr-pip:#efceff; --dr-edge:#b08bff; --dr-pip-light:#c78aff90; }
.dr-atmosphere {
  position:absolute; inset:-15% -9%; border-radius:50%;
  background:radial-gradient(ellipse,#050b10ed 0%,#070d15b0 34%,#070d1540 53%,transparent 69%);
  animation:drAtmosphere var(--dr-duration) ease both;
}
.dr-lane {
  --dr-glow:#baff42; position:absolute; width:var(--dr-size); height:var(--dr-size);
  top:calc(50% - var(--dr-size)*.7); left:calc(50% - var(--dr-size)*1.45);
  perspective:none;
}
.dr-lane-1 { --dr-glow:#b08aff; left:calc(50% + var(--dr-size)*.48); }
.dr-flight { width:100%; height:100%; transform-style:preserve-3d; animation:drFlightLeft var(--dr-duration) linear both; }
.dr-lane-1 .dr-flight { animation-name:drFlightRight; }
.dr-cube {
  width:100%; height:100%; position:relative; transform-style:preserve-3d;
  animation:drSpinLeft var(--dr-duration) linear both;
  will-change:transform;
}
.dr-lane-1 .dr-cube { animation-name:drSpinRight; }
/* Never put filter, opacity or clipping on the 3D carriers: they flatten the cube. */
.dr-face {
  position:absolute; inset:0; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr);
  padding:18%; border-radius:11%; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(145deg,var(--dr-face-hi),var(--dr-face-lo));
  border:1px solid var(--dr-edge);
  box-shadow:inset 0 0 0 2px #ffffff18,inset 3px 4px 8px #ffffff22,inset -3px -4px 9px #00000030,0 0 9px #00000030;
}
.dr-front { transform:translateZ(calc(var(--dr-size)*.5)); }
.dr-back { transform:rotateY(180deg) translateZ(calc(var(--dr-size)*.5)); }
.dr-right { transform:rotateY(90deg) translateZ(calc(var(--dr-size)*.5)); }
.dr-left { transform:rotateY(-90deg) translateZ(calc(var(--dr-size)*.5)); }
.dr-top { transform:rotateX(90deg) translateZ(calc(var(--dr-size)*.5)); }
.dr-bottom { transform:rotateX(-90deg) translateZ(calc(var(--dr-size)*.5)); }
.dr-core { position:absolute; inset:3%; background:var(--dr-face-lo); border-radius:5%; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.dr-core.dr-front { transform:translateZ(calc(var(--dr-size)*.47)); }
.dr-core.dr-back { transform:rotateY(180deg) translateZ(calc(var(--dr-size)*.47)); }
.dr-core.dr-right { transform:rotateY(90deg) translateZ(calc(var(--dr-size)*.47)); }
.dr-core.dr-left { transform:rotateY(-90deg) translateZ(calc(var(--dr-size)*.47)); }
.dr-core.dr-top { transform:rotateX(90deg) translateZ(calc(var(--dr-size)*.47)); }
.dr-core.dr-bottom { transform:rotateX(-90deg) translateZ(calc(var(--dr-size)*.47)); }
.dr-skin-neon .dr-lane-1 { --dr-pip:#cfb1ff; --dr-pip-light:#bd89ff90; --dr-edge:#8062a0; }
.dr-pip { width:78%; height:78%; border-radius:50%; place-self:center; background:var(--dr-pip); box-shadow:inset 1px 1px 2px #00000065,0 0 5px var(--dr-pip-light); }
.dr-ground { position:absolute; top:-8%; left:-8%; width:116%; height:116%; border-radius:50%; background:radial-gradient(ellipse,#000000bd,transparent 69%); animation:drShadow var(--dr-duration) linear both; }
.dr-impact { position:absolute; top:-25%; left:-25%; width:150%; height:150%; border:2px solid var(--dr-glow); border-radius:50%; box-shadow:0 0 17px var(--dr-glow),inset 0 0 13px var(--dr-glow); animation:drImpact var(--dr-duration) ease-out both; }
.dr-trails { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dr-trail { fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:185 620; animation:drTrail var(--dr-duration) ease-out both; }
.dr-trail-lime { stroke:#baff48; filter:drop-shadow(0 0 5px #baff48); }
.dr-trail-violet { stroke:#b092ff; filter:drop-shadow(0 0 5px #9a6aff); animation-direction:normal; stroke-dasharray:135 600; }
.dr-sparks { position:absolute; inset:0; }
.dr-spark { position:absolute; top:65%; left:50%; width:4px; height:4px; border-radius:50%; background:var(--dr-glow); box-shadow:0 0 8px var(--dr-glow); animation:drSpark var(--dr-duration) linear both; }
.dr-caption { position:absolute; top:calc(50% + var(--dr-size)*.93); left:0; width:100%; height:30px; text-align:center; color:#ebf7d4; text-shadow:0 2px 8px #000; }
.dr-caption-motion { display:inline-block; font-size:9px; font-weight:850; letter-spacing:.24em; animation:drMotionCaption var(--dr-duration) linear both; }
.dr-caption-result { position:absolute; inset:0; font-size:21px; line-height:1; font-weight:900; letter-spacing:.12em; animation:drResultCaption var(--dr-duration) linear both; }
.dr-caption-result > span { font-size:12px; color:#a8ba9c; vertical-align:middle; }
.dr-caption-result > small { display:block; margin-top:8px; font-size:8px; letter-spacing:.2em; color:#c8ff38; }
#diceZone.dice-cinematic { position:relative; }
#diceZone.dice-cinematic.rolling .game-die { visibility:hidden; animation:none !important; }
#diceZone.dice-cinematic.rolling::after { content:'Rolling'; position:absolute; inset:0; display:grid; place-items:center; color:#c8ddac; font-size:11px; letter-spacing:.1em; font-weight:750; }
@keyframes drStageLife { 0%{visibility:visible} 97%{visibility:visible} 100%{visibility:hidden} }
@keyframes drAtmosphere { 0%{opacity:0} 12%,88%{opacity:1} 100%{opacity:0} }
/* The final result faces are parallel to the camera for over one second.
   No other face is visible during the hold. Motion never changes a result. */
@keyframes drFlightLeft {
  0%{transform:translate3d(calc(var(--dr-size)*-1.4),calc(var(--dr-size)*.65),0) scale(.8)}
  10%{transform:translate3d(calc(var(--dr-size)*-1.55),calc(var(--dr-size)*.7),0) scale(.87)}
  26%{transform:translate3d(calc(var(--dr-size)*-.5),calc(var(--dr-size)*-.5),0) scale(1.12)}
  39%{transform:translate3d(calc(var(--dr-size)*.08),calc(var(--dr-size)*.05),0) scale(.98)}
  45%{transform:translate3d(0,calc(var(--dr-size)*-.06),0) scale(1.025)}
  50%,100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes drFlightRight {
  0%{transform:translate3d(calc(var(--dr-size)*1.4),calc(var(--dr-size)*-.65),0) scale(.8)}
  10%{transform:translate3d(calc(var(--dr-size)*1.55),calc(var(--dr-size)*-.7),0) scale(.87)}
  27%{transform:translate3d(calc(var(--dr-size)*.5),calc(var(--dr-size)*.5),0) scale(1.12)}
  40%{transform:translate3d(calc(var(--dr-size)*-.08),calc(var(--dr-size)*.05),0) scale(.98)}
  46%{transform:translate3d(0,calc(var(--dr-size)*-.06),0) scale(1.025)}
  50%,100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes drSpinLeft {
  0%{transform:rotateX(-12deg) rotateY(-15deg) rotateZ(-16deg)}
  10%{transform:rotateX(-36deg) rotateY(20deg) rotateZ(-28deg)}
  26%{transform:rotateX(280deg) rotateY(250deg) rotateZ(100deg)}
  39%{transform:rotateX(685deg) rotateY(695deg) rotateZ(344deg)}
  45%{transform:rotateX(725deg) rotateY(715deg) rotateZ(363deg)}
  50%,100%{transform:rotateX(720deg) rotateY(720deg) rotateZ(360deg)}
}
@keyframes drSpinRight {
  0%{transform:rotateX(12deg) rotateY(15deg) rotateZ(16deg)}
  10%{transform:rotateX(36deg) rotateY(-20deg) rotateZ(28deg)}
  27%{transform:rotateX(-280deg) rotateY(-250deg) rotateZ(-100deg)}
  40%{transform:rotateX(-685deg) rotateY(-695deg) rotateZ(-344deg)}
  46%{transform:rotateX(-725deg) rotateY(-715deg) rotateZ(-363deg)}
  50%,100%{transform:rotateX(-720deg) rotateY(-720deg) rotateZ(-360deg)}
}
@keyframes drShadow { 0%,100%{opacity:.6;transform:scale(1)} 26%{opacity:.25;transform:scale(1.35)} 45%,90%{opacity:.9;transform:scale(.93)} }
@keyframes drImpact { 0%,36%{opacity:0;transform:scale(.5)} 40%{opacity:.65;transform:scale(.85)} 52%{opacity:.12;transform:scale(1.45)} 60%,100%{opacity:0;transform:scale(1.5)} }
@keyframes drTrail { 0%,7%{opacity:0;stroke-dashoffset:140} 18%{opacity:.7} 36%{opacity:.6;stroke-dashoffset:-195} 49%,100%{opacity:0;stroke-dashoffset:-365} }
@keyframes drSpark { 0%,37%{opacity:0;transform:translate(0,0) scale(.5)} 41%{opacity:.75} 53%,100%{opacity:0;transform:translate(calc(var(--px)*var(--dr-size)*1.5),calc(var(--py)*var(--dr-size)*1.5)) scale(.3)} }
@keyframes drMotionCaption { 0%,5%{opacity:0} 13%,36%{opacity:.9} 44%,100%{opacity:0} }
@keyframes drResultCaption { 0%,46%{opacity:0;transform:translateY(4px)} 50%,100%{opacity:1;transform:translateY(0)} }
@media (max-width:720px), (max-height:520px) {
  .dr-caption-motion { font-size:8px; letter-spacing:.16em; }
  .dr-caption-result { font-size:17px; }
  .dr-spark { width:3px; height:3px; }
}
@media (prefers-reduced-motion:reduce) {
  #gameBoard > .dice-roll-overlay { display:none !important; }
  #diceZone.dice-cinematic.rolling .game-die { visibility:visible; }
  #diceZone.dice-cinematic.rolling::after { display:none; }
}

/* V1.17: respond to the input immediately, before the confirmed result arrives.
   No numeric faces are displayed during this request phase. */
#gameBoard > .dice-roll-overlay { --dr-delay:0ms; animation-delay:var(--dr-delay); }
.dice-roll-overlay .dr-atmosphere,
.dice-roll-overlay .dr-flight,
.dice-roll-overlay .dr-cube,
.dice-roll-overlay .dr-ground,
.dice-roll-overlay .dr-impact,
.dice-roll-overlay .dr-trail,
.dice-roll-overlay .dr-spark,
.dice-roll-overlay .dr-caption-motion,
.dice-roll-overlay .dr-caption-result { animation-delay:var(--dr-delay); }
#gameBoard > .dice-roll-pending { animation:none; }
.dice-roll-pending .dr-atmosphere { animation:none; opacity:1; }
.dice-roll-pending .dr-ground { animation:none; opacity:.55; }
.dice-roll-pending .dr-flight { animation:drPendingFlight 620ms ease-in-out infinite alternate; }
.dice-roll-pending .dr-lane-1 .dr-flight { animation-direction:alternate-reverse; }
.dice-roll-pending .dr-cube { animation:drPendingSpin 900ms linear infinite; }
.dice-roll-pending .dr-lane-1 .dr-cube { animation-direction:reverse; }
.dr-pending-mark { grid-area:2/2; width:55%; height:55%; border:2px solid var(--dr-pip); border-radius:25%; opacity:.45; transform:rotate(45deg); }
.dr-pending-caption,.dr-wait-caption { position:absolute; inset:0; font-size:10px; font-weight:850; letter-spacing:.15em; }
.dr-pending-caption { animation:drPendingCaption 1ms 2500ms both; }
.dr-wait-caption { animation:drWaitCaption 1ms 2500ms both; }
#diceZone.roll-pending { min-height:44px; display:flex; align-items:center; justify-content:center; }
.roll-pending-label { font-size:11px; font-weight:750; color:#d9efba; letter-spacing:.08em; }
@keyframes drPendingFlight { from{transform:translateY(-6px) scale(.96)} to{transform:translateY(5px) scale(1.04)} }
@keyframes drPendingSpin { from{transform:rotateX(-22deg) rotateY(20deg) rotateZ(-12deg)} to{transform:rotateX(338deg) rotateY(380deg) rotateZ(348deg)} }
@keyframes drPendingCaption { from{opacity:1} to{opacity:0} }
@keyframes drWaitCaption { from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce) {
  #gameBoard > .dice-roll-overlay.dice-roll-pending { display:grid !important; }
  .dice-roll-pending .dr-flight,.dice-roll-pending .dr-cube { animation:none; transform:none; }
  .dice-roll-pending .dr-pending-caption::after { content:' / CONFIRMING'; }
}