/* Spires board (hold-collect, variant respins.rule "echo" + spires): the reels board plus the vault laid over its window.
   Colours come from the game's skin: --vault-bg, --vault-cell (cell rim), --val-bg / --val-ink / --val-rim (the plate a
   coin's prize is written on: keep the pair at 4.5:1 or more), --spire-glow, --spire-badge-bg / --spire-badge-ink.
   Durations come from the board (ctx.T: turbo, admin speed, reduced motion): --roll-ms, --ring-ms, --fuse-ms.
   Animations move transform, opacity, clip-path and filter only. */
.spire-board .vault{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(var(--reels,5),var(--cell));grid-template-rows:repeat(var(--rows,4),var(--cell));background:var(--vault-bg,rgba(0,0,0,.72));animation:sb-in .35s ease-out}
.spire-board .vcell{position:relative;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--vault-cell,rgba(255,255,255,.08))}
.spire-board .vcell .sym,.spire-board .cell.coin .sym{position:relative;width:88%;height:88%}
/* a coin's prize: on a light plate across the stone's lower half (dark digits; ≥ 14 px at the smallest cells) */
.spire-board .val{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);padding:.08em .32em .04em;border-radius:.45em;white-space:nowrap;pointer-events:none;
  font:700 max(14px,calc(var(--cell)*.21))/1.05 var(--ui,system-ui);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--val-ink,#1B0D1F);background:var(--val-bg,#F7F1FF);box-shadow:0 0 0 1.5px var(--val-rim,rgba(27,13,31,.55)),0 2px 6px rgba(0,0,0,.45)}
.spire-board .sym.k-p .val,.spire-board .sym.k-c .val,.spire-board .sym.k-s .val{box-shadow:0 0 0 2px var(--val-rim-heart,#E8C25A),0 2px 8px rgba(0,0,0,.5)}
/* a respin: the empty cells shimmer; a new coin rings in (scale 1 -> 1.06 -> 1) with one widening ring */
.spire-board .vcell.roll .sym{animation:sb-shimmer var(--roll-ms,.6s) ease-in-out}
.spire-board .vcell.drop .sym{animation:sb-ring var(--ring-ms,.24s) cubic-bezier(.3,1.5,.5,1)}
.spire-board .vcell.drop::after{content:"";position:absolute;inset:14%;border-radius:50%;border:2px solid var(--spire-glow,#7DF5DA);pointer-events:none;animation:sb-wave calc(var(--ring-ms,.24s)*2.2) ease-out forwards}
/* a column fuses: its stones stretch towards the middle and fade while the spire rises from the floor of the vault */
.spire-board .vcell.fusing .sym{animation:sb-stretch calc(var(--fuse-ms,.5s)*.45) ease-in forwards}
.spire-board .vcell.fusing[data-r="0"] .sym{--to:60%}.spire-board .vcell.fusing[data-r="1"] .sym{--to:20%}
.spire-board .vcell.fusing[data-r="2"] .sym{--to:-20%}.spire-board .vcell.fusing[data-r="3"] .sym{--to:-60%}
.spire-board .vcell.fused .sym{opacity:0}
.spire-board .spire{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--cell)*.08) 0 calc(var(--cell)*.1);pointer-events:none;
  filter:drop-shadow(0 0 calc(var(--cell)*.08) var(--spire-glow,#7DF5DA))}
.spire-board .spire img{position:absolute;inset:0 3%;width:94%;height:100%}
.spire-board .spire .mult,.spire-board .spire .sval{position:relative;white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:.5em;padding:.06em .36em .02em;line-height:1.1}
.spire-board .spire .mult{font:800 max(15px,calc(var(--cell)*.26))/1.1 var(--display,Georgia,serif);color:var(--spire-badge-ink,#1B0D1F);background:var(--spire-badge-bg,#FFE9A8);box-shadow:0 0 0 2px rgba(27,13,31,.6),0 3px 8px rgba(0,0,0,.45)}
.spire-board .spire .sval{font:700 max(14px,calc(var(--cell)*.21))/1.05 var(--ui,system-ui);color:var(--val-ink,#1B0D1F);background:var(--val-bg,#F7F1FF);box-shadow:0 0 0 1.5px var(--val-rim,rgba(27,13,31,.55)),0 2px 6px rgba(0,0,0,.45)}
.spire-board .spire.rise{animation:sb-rise var(--fuse-ms,.5s) cubic-bezier(.2,1.1,.35,1) both}
/* the last respin collects: each cell and each spire rings once (local, small) */
.spire-board .vcell.gather .sym{animation:sb-ring .26s ease-out;filter:drop-shadow(0 0 8px var(--spire-glow,#7DF5DA))}
.spire-board .spire.gather{animation:sb-gather .5s ease-out}
/* the full board: one slow glow over the vault (it claims the page's flash clock), else a still outline */
.spire-board .vault.cathedral::after,.spire-board .vault.cathedral-still::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--spire-glow,#7DF5DA)}
.spire-board .vault.cathedral::after{animation:sb-cathedral 1.2s ease-out forwards}
@keyframes sb-in{from{opacity:0}to{opacity:1}}
@keyframes sb-shimmer{0%,100%{opacity:1;transform:none}45%{opacity:.5;transform:translateY(-5%) scale(.95)}}
@keyframes sb-ring{0%{transform:scale(.62);opacity:0}62%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes sb-wave{from{transform:scale(.6);opacity:.9}to{transform:scale(1.35);opacity:0}}
@keyframes sb-stretch{to{transform:translateY(var(--to,0)) scale(.62,1.3);opacity:.15}}
@keyframes sb-rise{from{clip-path:inset(100% 0 0 0);filter:drop-shadow(0 0 calc(var(--cell)*.2) var(--spire-glow,#7DF5DA)) brightness(1.25)}to{clip-path:inset(0 0 0 0)}}
@keyframes sb-gather{0%{transform:none}40%{transform:scale(1.04,1.02)}100%{transform:none}}
@keyframes sb-cathedral{0%{box-shadow:inset 0 0 0 0 var(--spire-glow,#7DF5DA),inset 0 0 0 0 transparent}40%{box-shadow:inset 0 0 0 3px var(--spire-glow,#7DF5DA),inset 0 0 calc(var(--cell)*.9) color-mix(in srgb,var(--spire-glow,#7DF5DA) 45%,transparent)}100%{box-shadow:inset 0 0 0 3px var(--spire-glow,#7DF5DA),inset 0 0 0 0 transparent}}
/* reduced motion: no ring, shimmer, stretch or rise — the vault changes in place (a short fade at most) */
body.still .spire-board .vault,body.still .spire-board .vcell .sym,body.still .spire-board .vcell::after,body.still .spire-board .spire,body.still .spire-board .vault::after{animation:none!important}
body.still .spire-board .vcell.drop::after{display:none}
@media (prefers-reduced-motion:reduce){
  .spire-board .vault,.spire-board .vcell .sym,.spire-board .vcell::after,.spire-board .spire,.spire-board .vault::after{animation:none!important}
  .spire-board .vcell.drop::after{display:none}
}