/* Giant-block board (giant.js) on the shared reels board: the block is ONE span over the reels window, placed by
   --cell (--r reel, --h row, --n size), above the cells and under the payline overlay. Colours and decoration come from
   the game's skin: --giant-bg (the block's ground), --giant-edge (its outline), --giant-trail (the entry trail),
   --giant-dust (the landing cloud), --win-glow and --primary (a line through the block). */
.giant-board .giants{position:absolute;inset:0;z-index:2;pointer-events:none}
.giant-board svg.lines{z-index:3} /* the paylines stay drawn over the block */
.giant-board .giant{position:absolute;left:calc(var(--cell)*var(--r));top:calc(var(--cell)*var(--h));width:calc(var(--cell)*var(--n));height:calc(var(--cell)*var(--n));
  display:flex;align-items:center;justify-content:center;border-radius:var(--giant-radius,10px);background:var(--giant-bg,rgba(0,0,0,.62));
  box-shadow:inset 0 0 0 2px var(--giant-edge,rgba(255,255,255,.5)),0 6px 18px rgba(0,0,0,.45);transition:filter .2s,box-shadow .2s}
.giant-board .giant .sym{position:relative;width:94%;height:94%}
.giant-board .giant .sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.giant-board .cell .sym.under{visibility:hidden}
/* the entry: the span strides down from the top of the window (ease-out quart) with a fading trail above it */
.giant-board .giant.stride{animation:gb-stride var(--stride,700ms) var(--stride-ease,cubic-bezier(.25,1,.5,1)) both}
.giant-board .giant.stride::before{content:"";position:absolute;left:14%;right:14%;bottom:100%;height:calc(var(--cell)*.9);border-radius:40% 40% 0 0;
  background:linear-gradient(0deg,var(--giant-trail,rgba(255,255,255,.22)),transparent);transform-origin:50% 100%;animation:gb-trail var(--stride,700ms) ease-out both}
@keyframes gb-stride{from{transform:translateY(calc(var(--cell)*-1.1));opacity:0;filter:blur(2.5px)}45%{opacity:1}to{transform:none;opacity:1;filter:none}}
@keyframes gb-trail{from{opacity:.95;transform:scaleY(1)}to{opacity:0;transform:scaleY(.15)}}
/* the landing: the outline smears for a moment and a low cloud of dust spreads from its foot (no shake) */
.giant-board .giant.landed{animation:gb-smear .32s ease-out}
.giant-board .giant.landed::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-4%;height:24%;border-radius:50%;
  background:radial-gradient(closest-side,var(--giant-dust,rgba(255,255,255,.3)),transparent);animation:gb-dust .7s ease-out forwards}
@keyframes gb-smear{from{filter:blur(1.4px) brightness(1.08);transform:scale(1.018)}to{filter:none;transform:none}}
@keyframes gb-dust{from{opacity:.9;transform:scaleX(.6)}to{opacity:0;transform:scaleX(1.15) translateY(-18%)}}
/* a line through the block: the span lights as one; the other lines dim it with the rest of the window */
.giant-board .giant.win{box-shadow:inset 0 0 0 2px var(--primary),0 0 18px var(--win-glow)}
.giant-board .giant.win .sym{animation:gb-throb .8s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px var(--win-glow))}
.giant-board .giant.dim .sym{filter:brightness(.42) saturate(.6)}
@keyframes gb-throb{to{transform:scale(1.035)}}
/* the Titan grows for its next landing: a slow swell of its outline (it lands larger next time) */
.giant-board .giant.grow{animation:gb-grow .9s ease-in-out}
@keyframes gb-grow{0%,100%{box-shadow:inset 0 0 0 2px var(--giant-edge,rgba(255,255,255,.5))}50%{box-shadow:inset 0 0 0 4px var(--primary),0 0 26px var(--win-glow)}}
/* reduced motion: the block only fades in; no trail, smear, dust, throb or swell */
body.still .giant-board .giant.stride{animation:gb-fade var(--stride,60ms) linear both}
body.still .giant-board .giant.stride::before,body.still .giant-board .giant.landed::after{display:none}
body.still .giant-board .giant.landed,body.still .giant-board .giant.win .sym,body.still .giant-board .giant.grow{animation:none}
@keyframes gb-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .giant-board .giant.stride{animation:gb-fade var(--stride,60ms) linear both}
  .giant-board .giant.stride::before,.giant-board .giant.landed::after{display:none}
  .giant-board .giant.landed,.giant-board .giant.win .sym,.giant-board .giant.grow{animation:none}
}