/* Hex board (hex.js; grid-pipeline games on a board of pointy-top hexagons): a field of column tops placed and moved by
   transform only and faded by opacity only, a layer over it for floaters and the presenters' overlays, and per-cell
   badges that ride with their cell. Every animated property is transform or opacity; rims, rings and glows are static
   paint whose opacity changes. One cell is var(--cell) wide and 2/√3 of that high; hex.js sets --hx-w / --hx-h (the
   board in cell units), --hx-wash (a cell's wash) and --hx-land, and a per-cell --d (its delay in the sweeping wave).
   Colours come from the game's skin: --hex-top (the column top), --hex-rim (its rim), --hex-gap (the board's ground
   between the columns), --sym-size, --win-ring, --win-glow, --hot-ring, --land-ring, --fs-ring, --void-ink, --wave-foam,
   --rise-ease, --badge-bg, --badge-ink, --float-ink, --float-stroke. */
.hex-board{position:relative;width:calc(var(--cell)*var(--hx-w,7));height:calc(var(--cell)*var(--hx-h,4.62))}
.hex-board .hx-field{position:absolute;inset:0;contain:layout}
.hex-board .cell{position:absolute;left:0;top:0;width:var(--cell);height:calc(var(--cell)*1.1547);display:flex;align-items:center;justify-content:center;will-change:transform;backface-visibility:hidden}
/* the column: its rim (the cell's own hexagon) and its top (an inset hexagon); the clip keeps both hexagonal */
.hex-board .cell::before,.hex-board .hx-top{content:"";position:absolute;pointer-events:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex-board .cell::before{inset:0;background:var(--hex-rim,rgba(255,255,255,.18))}
.hex-board .hx-top{inset:4.5% 5.2%;background:var(--hex-top,rgba(0,0,0,.55))}
.hex-board .face{position:relative;z-index:1;width:var(--sym-size,74%);height:var(--sym-size,74%);transition:transform .2s,opacity .2s}
.hex-board .face>.sym{position:relative;width:100%;height:100%}
.hex-board .sym img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.hex-board.feature .cell::before{background:var(--fs-ring,var(--hex-rim,rgba(255,255,255,.24)))}
/* a winning cell: the rim turns to the win ring, a glow breathes behind it (opacity) and the symbol grows a little;
   marking dims the cells that do not pay */
.hex-board .cell.win{z-index:2}
.hex-board .cell.win::before{background:var(--win-ring,#fff)}
.hex-board .cell.win::after{content:"";position:absolute;inset:-6%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--win-glow,rgba(255,240,200,.5)),transparent);will-change:opacity;animation:hx-glow .5s ease-in-out infinite alternate}
.hex-board .cell.win .face{transform:scale(1.08)}
.hex-board .cell.hot:not(.win)::before{background:var(--hot-ring,var(--hex-rim,#fff))}
.hex-board.marking .cell:not(.win) .face{opacity:.4}
/* a scatter a respin brought while only the drop counts: dimmed and struck through (shape, not colour alone) */
.hex-board .cell.void .face{opacity:.38}
.hex-board .badge.b-void{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,transparent calc(50% - 1.5px),var(--void-ink,rgba(255,255,255,.75)) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px));
  clip-path:polygon(50% 18%,82% 36%,82% 64%,50% 82%,18% 64%,18% 36%)}
/* one-shots: a washed cell's symbol rises in behind the wave (delay --d), a still-mode cell fades in, a landed scatter
   pulses once with a halo */
.hex-board .cell.wash .face{animation:hx-wash var(--hx-wash,.21s) var(--rise-ease,cubic-bezier(.3,.7,.35,1)) var(--d,0ms) both}
.hex-board .cell.fadein .face{animation:hx-fade .12s linear}
.hex-board .cell.land .face{animation:hx-land var(--hx-land,.24s) ease-out}
.hex-board .cell.land .hx-top{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--land-ring,#fff) 18%,transparent)}
/* the respin wave: a pale band of foam crossing the board left to right (brightness ≤ 10 %) */
.hex-board .hx-wave{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hex-board .hx-band{position:absolute;top:0;bottom:0;left:0;width:34%;
  background:linear-gradient(90deg,transparent,var(--wave-foam,rgba(255,255,255,.1)) 45%,var(--wave-foam,rgba(255,255,255,.1)) 55%,transparent);
  animation:hx-sweep .35s cubic-bezier(.45,.05,.4,1) forwards;will-change:transform}
/* the trigger's scatters that a respin washed away: a ghost over their cells while the feature starts */
.hex-board .hx-ghost{display:flex;align-items:center;justify-content:center;opacity:.8;animation:hx-ghost 1.2s ease-in-out infinite alternate}
.hex-board .hx-ghost>.sym{position:relative;width:var(--sym-size,74%);height:var(--sym-size,74%)}
/* per-cell badges (presenters): placed by the presenter's or the game's css per layer (.b-<layer>) */
.hex-board .badge{position:absolute;z-index:3;pointer-events:none}
:where(.hex-board .badge){right:8%;top:14%;min-width:28%;padding:0 .28em;border-radius:999px;display:grid;place-items:center;
  font:800 calc(var(--cell)*.17)/1.35 var(--ui,system-ui);color:var(--badge-ink,#fff);background:var(--badge-bg,rgba(0,0,0,.75));font-variant-numeric:tabular-nums}
/* the layer over the field: floaters and the presenters' overlays */
.hex-board .cs-over{position:absolute;inset:0;z-index:5;pointer-events:none}
.hex-board .cs-layer{position:absolute;inset:0}
.hex-board .cs-layer>*{position:absolute;left:0;top:0}
.hex-board .cs-float{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:800 calc(var(--cell)*.3)/1 var(--ui,system-ui);color:var(--float-ink,#fff);
  -webkit-text-stroke:calc(var(--cell)*.02) var(--float-stroke,#000);paint-order:stroke fill;text-shadow:0 0 12px var(--win-glow,rgba(255,240,200,.5));animation:hx-float 1.2s cubic-bezier(.2,.8,.3,1) forwards}
.hex-board .cs-float.m{font-size:calc(var(--cell)*.42)}
@keyframes hx-glow{from{opacity:.45}to{opacity:1}}
@keyframes hx-wash{0%{opacity:0;transform:translateY(22%) scale(.9)}100%{opacity:1;transform:none}}
@keyframes hx-fade{from{opacity:0}to{opacity:1}}
@keyframes hx-land{0%{transform:scale(1.2)}100%{transform:none}}
@keyframes hx-sweep{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@keyframes hx-ghost{from{opacity:.45}to{opacity:.85}}
@keyframes hx-float{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}
/* reduced motion: nothing pulses, grows, sweeps or rises — changes fade (≤ 120 ms); hex.js moves nothing either */
body.still .hex-board .cell.win::after,body.still .hex-board .hx-ghost{animation:none}
body.still .hex-board .face{transition-duration:.12s}
body.still .hex-board .cell.win .face{transform:none}
body.still .hex-board .cell.wash .face,body.still .hex-board .cell.land .face,body.still .hex-board .cs-float{animation:hx-fade .12s linear}
body.still .hex-board .hx-wave{display:none}
@media (prefers-reduced-motion:reduce){
  .hex-board .cell.win::after,.hex-board .hx-ghost{animation:none}
  .hex-board .face{transition-duration:.12s}
  .hex-board .cell.win .face{transform:none}
  .hex-board .cell.wash .face,.hex-board .cell.land .face,.hex-board .cs-float{animation:hx-fade .12s linear}
  .hex-board .hx-wave{display:none}
}