/* Rotating-core board (shared by rotate games, on reels.css): the turntable under the 3×3 core, the turn preview arrows
   on its corners and the plate that turns a quarter at a time. Colours come from the game's skin:
   --rot-plate (the plate under the core cells), --rot-rim (its rim and the dial), --rot-hub (the centre boss),
   --rot-arrow / --rot-arrow-ink (the preview arrows: a disc and the arrow on it, ≥ 3:1 for a graphic),
   --rot-gear (the ring round a Gear that turns the core), --rot-key (the glow of the Keys that wind the mainspring).
   Animated properties: transform and opacity only. */
.rot-board .rot-table,.rot-board .rot-over{position:absolute;width:calc(var(--cell)*3);height:calc(var(--cell)*3);pointer-events:none}
.rot-board .rot-over{z-index:3}
/* the turntable: a square brass plate with a turning dial ring and a boss in the middle (behind the symbols) */
.rot-table .rot-plate{position:absolute;inset:3%;border-radius:10%;background:var(--rot-plate,rgba(255,255,255,.06));box-shadow:inset 0 0 0 2px var(--rot-rim,rgba(255,255,255,.3))}
.rot-table .rot-dial{position:absolute;inset:6%;border-radius:50%;transform:rotate(var(--rot-a,0deg));
  background:repeating-conic-gradient(from -2deg,var(--rot-rim,rgba(255,255,255,.3)) 0 4deg,transparent 4deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 63%,#000 64% 70%,transparent 71%);mask:radial-gradient(circle,transparent 0 63%,#000 64% 70%,transparent 71%)}
.rot-table .rot-hub{position:absolute;left:50%;top:50%;width:calc(var(--cell)*.92);height:calc(var(--cell)*.92);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,transparent 0 58%,var(--rot-hub,rgba(255,255,255,.12)) 60% 100%)}
/* the preview: one arrow per turn on the core's corners (top right, bottom right, bottom left); a played one fades */
.rot-over .rot-arrow{position:absolute;left:calc(var(--ax)*100%);top:calc(var(--ay)*100%);width:calc(var(--cell)*.44);height:calc(var(--cell)*.44);min-width:22px;min-height:22px;
  transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;color:var(--rot-arrow-ink,#1E1A17);background:var(--rot-arrow,#F2D58A);
  box-shadow:0 0 0 2px var(--rot-arrow-ink,#1E1A17),0 3px 8px rgba(0,0,0,.45);animation:rot-arrow-in .32s cubic-bezier(.2,1.4,.4,1) both;transition:opacity .25s,transform .25s}
.rot-over .rot-arrow svg{width:78%;height:78%}
.rot-over .rot-arrow.used{opacity:.22;transform:translate(-50%,-50%) scale(.8)}
@keyframes rot-arrow-in{from{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-90deg)}to{opacity:1;transform:translate(-50%,-50%)}}
/* the turning plate: a copy of the core laid over its cells (which hide meanwhile), its symbols turn back to stay upright */
.rot-over .rot-plate-turn{position:absolute;inset:0;transform-origin:50% 50%;border-radius:6%;background:var(--rot-plate,rgba(0,0,0,.5));
  box-shadow:inset 0 0 0 2px var(--rot-rim,rgba(255,255,255,.3)),0 6px 16px rgba(0,0,0,.4);will-change:transform}
.rot-over .rot-plate-turn.fade{box-shadow:none;background:var(--rot-plate,rgba(0,0,0,.5));will-change:opacity}
.rot-over .rc{position:absolute;left:calc(var(--cell)*var(--i));top:calc(var(--cell)*var(--j));width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center}
.rot-over .rc .sym{position:relative;width:88%;height:88%;transform-origin:50% 50%}
.rot-board .cell.rot-under{visibility:hidden}
/* a Gear in the core that turns it: a ring round the cell; the Keys that wind the mainspring glow */
.rot-board .cell.rot-gear::before,.rot-board .cell.rot-key::before{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;box-shadow:0 0 0 3px var(--rot-gear,#5FB3A1),0 0 16px var(--rot-gear,#5FB3A1)}
.rot-board .cell.rot-gear::before{animation:rot-gear-in .3s ease-out both}
.rot-board .cell.rot-key::before{border-radius:14%;box-shadow:0 0 0 3px var(--rot-key,#F2D58A),0 0 18px var(--rot-key,#F2D58A)}
@keyframes rot-gear-in{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
body.still .rot-over .rot-arrow,body.still .rot-board .cell.rot-gear::before{animation:none}
body.still .rot-over .rot-arrow{transition:none}
@media (prefers-reduced-motion:reduce){
  .rot-over .rot-arrow,.rot-board .cell.rot-gear::before{animation:none}
  .rot-over .rot-arrow{transition:none}
}