/* Dial board (reels-lines games with a dial of free-spin segments), on top of reels.css. Wide screens: the disc stands
   left of the reels (dial | pegs | window | pegs); phones: the disc and its label sit in a row above the reels. Colours
   come from the game's skin: --dial-c0…7 (segment colours, unless the board is given seasonColor), --dial-rim, --dial-hub,
   --dial-chip / --dial-chip-ink (the spins roundel: keep ≥ 4.5:1), --dial-pointer, --dial-ink (the label text on the
   label's ground --dial-label-bg: keep ≥ 4.5:1), --dial-mult-bg / --dial-mult-ink (the ×N badge), --line-case (the dark casing under a win's line, so a light line
   colour still reads on a light window). Animations move
   transform / opacity only; the disc itself turns by Element.animate (dial.js). */
.dial-board{grid-template-columns:auto auto auto auto;column-gap:10px}
.dial-board .dial{grid-column:1;grid-row:1;align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--dial,240px)}
.dial-board .dial-disc{position:relative;width:var(--dial,240px);height:var(--dial,240px)}
.dial-board .dial-face{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.dial-board .dial-face svg{width:100%;height:100%;display:block;overflow:visible}
.dial-board .dial .rim{fill:var(--dial-rim,#2B1A0C)}
.dial-board .dial .wedge{fill:var(--sc);stroke:var(--dial-rim,#2B1A0C);stroke-width:1.6}
.dial-board .dial .glyph{color:var(--dial-glyph,#22160A)}
.dial-board .dial .chip{fill:var(--dial-chip,#F3E6C4);stroke:var(--dial-rim,#2B1A0C);stroke-width:1.4}
.dial-board .dial .spins{fill:var(--dial-chip-ink,#22160A);font:700 17px/1 var(--ui);text-anchor:middle}
.dial-board .dial .hub{fill:var(--dial-hub,#C99A3A);stroke:var(--dial-rim,#2B1A0C);stroke-width:2}
.dial-board .dial .seg{transition:opacity .3s}
.dial-board .dial .seg.on .wedge{stroke:var(--dial-on,#FFF4D2);stroke-width:4}
.dial-board .dial:has(.seg.on) .seg:not(.on){opacity:.62}
.dial-board .dial.turning .seg{opacity:1}
/* the pointer: a gilded wedge over the top of the disc, pointing down */
.dial-board .dial-pointer{position:absolute;left:50%;top:-6px;width:22px;height:26px;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,var(--dial-pointer,#F2CF73),color-mix(in srgb,var(--dial-pointer,#F2CF73) 55%,#000));filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.dial-board .dial-label{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;padding:4px 12px;border-radius:8px;text-align:center;
  background:var(--dial-label-bg,#F3E6C4);color:var(--dial-ink,#22160A);max-width:100%}
.dial-board .dial-season{font-family:var(--display);font-weight:400;font-size:clamp(15px,1.5vw,20px);line-height:1.15}
.dial-board .dial-note{font-size:13px;line-height:1.2}
.dial-board .dial-note:empty{display:none}
.dial-board .dial-mult{font-style:normal;font-weight:700;font-size:14px;padding:1px 8px;border-radius:999px;background:var(--dial-mult-bg,#22160A);color:var(--dial-mult-ink,#F3E6C4)}
.dial-board .dial-mult:not([hidden]){animation:dl-badge .5s cubic-bezier(.2,.8,.3,1) both}
.dial-board>.pegs.left{grid-column:2}.dial-board>.window{grid-column:3}.dial-board>.pegs.right{grid-column:4}
/* no room for full-size pegs (reels.js fitPegs): the disc and the window only */
.dial-board.pegs-off{grid-template-columns:auto auto;column-gap:10px}.dial-board.pegs-off>.window{grid-column:2}
/* the win sweep: each lit cell lights up after its delay (--wd, set per cell by dial.js) */
.dial-board .cell.win::after{animation:dl-lit .28s var(--wd,0ms) ease-out both}
.dial-board .cell.win .sym{animation-delay:var(--wd,0ms)}
.dial-board svg.lines .case{stroke:var(--line-case,rgba(0,0,0,.55))}
.dial-board svg.lines .dir{stroke:rgba(0,0,0,.55);stroke-width:2;vector-effect:non-scaling-stroke}
@keyframes dl-lit{from{opacity:.2;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes dl-badge{from{transform:scale(.6)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .dial-board .cell.win::after,.dial-board .dial-mult:not([hidden]){animation:none}
  .dial-board .dial .seg{transition:none}
}
/* phones: the disc and its label in a row above the reels */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .dial-board{grid-template-columns:auto;row-gap:6px}
  .dial-board .dial{grid-column:1;grid-row:1;flex-direction:row;justify-content:center;width:auto;gap:10px}
  .dial-board>.window{grid-column:1;grid-row:2}
  .dial-board .dial-label{align-items:flex-start;text-align:left;min-height:0;max-width:calc(var(--cell)*5 - var(--dial,96px) - 10px)}
  .dial-board .dial-season{font-size:16px}
  .dial-board .dial-note{font-size:13px}
  .dial-board .dial .spins{font-size:19px}
  .dial-board .dial-pointer{width:16px;height:19px;top:-4px}
}