/* Flap board (boards/flap.js): the WAYS counter of flip digits over a grid of split-flap plates, one per cell (DOM order =
   cell order: reel, then row). A plate has a slit across its middle; a Flip Tile shows its facets as segments on their
   own band colours with slits between them (2: upper and lower flap; 3: the upper flap whole and the lower split; 4: a
   2 × 2). Colours are tokens the
   game's skin sets: --fp-plate-hi / --fp-plate-lo / --fp-slit / --fp-hinge (plates), --fp-win / --fp-win-glow (a winning
   cell), --fp-held / --fp-held-hi (the amber lamp of a held tile), --fp-ticket / --fp-ticket-edge (a pass under a held
   tile), --fp-tease, --fp-window-bg, --fp-cap-ink, --fp-digit-ink / --fp-digit-hi / --fp-digit-lo, --fp-formula-ink.
   Animated properties: transform and opacity only (the flips are rotateX turns run by flap.js). */
.flap-board{display:flex;flex-direction:column;align-items:center;gap:calc(var(--cell)*.06)}
.flap-board .fp-head{display:flex;align-items:center;justify-content:center;gap:calc(var(--cell)*.07);min-height:max(30px,calc(var(--cell)*.44));
  max-width:calc(var(--cell)*var(--reels,5));color:var(--fp-cap-ink,#F4EBD0);white-space:nowrap}
.flap-board .fp-cap{font:800 max(13px,calc(var(--cell)*.2))/1 var(--display,sans-serif);letter-spacing:.16em}
.flap-board .fp-formula{display:flex;align-items:center;gap:2px;font:600 max(12px,calc(var(--cell)*.15))/1 var(--ui,sans-serif);color:var(--fp-formula-ink,#C9CED6)}
.flap-board .fp-formula .fp-f{font-style:normal;font-variant-numeric:tabular-nums}
.flap-board .fp-formula .fp-x{opacity:.85;padding:0 1px}
.flap-board .fp-digits{display:flex;align-items:center;gap:max(2px,calc(var(--cell)*.025));perspective:200px;transition:opacity .25s}
.flap-board .fp-head.busy .fp-digits{opacity:.6}
.flap-board .fp-d{display:inline-grid;place-items:center;width:max(17px,calc(var(--cell)*.25));height:max(26px,calc(var(--cell)*.38));border-radius:3px;font:800 max(20px,calc(var(--cell)*.31))/1 var(--display,sans-serif);font-style:normal;
  color:var(--fp-digit-ink,#FEEF20);background:linear-gradient(180deg,var(--fp-digit-hi,#22262E) 0 48.5%,#000 48.5% 51.5%,var(--fp-digit-lo,#15181D) 51.5%);box-shadow:0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.6)}
.flap-board .fp-c{font:800 max(20px,calc(var(--cell)*.31))/1 var(--display,sans-serif);font-style:normal;color:var(--fp-digit-ink,#FEEF20);margin:0 -1px}

.flap-board .fp-window{position:relative;border-radius:calc(var(--cell)*.08);background:var(--fp-window-bg,#05070A);padding:calc(var(--cell)*.03)}
.flap-board .fp-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,4),var(--cell));grid-template-columns:repeat(var(--reels,5),var(--cell))}
.flap-board .fp-cell{position:relative;padding:calc(var(--cell)*.035);perspective:calc(var(--cell)*3.4)}
.flap-board .fp-plate{position:relative;width:100%;height:100%;border-radius:calc(var(--cell)*.07);overflow:hidden;backface-visibility:hidden;transform-origin:50% 50%;
  background:linear-gradient(180deg,var(--fp-plate-hi,#2E333C) 0 50%,var(--fp-plate-lo,#22262D) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 2px 3px rgba(0,0,0,.45);transition:box-shadow .2s}
/* the slit across a plate (and its hinge) lies over the symbol, as on a real board; a Flip Tile has its own slits */
.flap-board .fp-plate::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;z-index:2;pointer-events:none;background:var(--fp-slit,#07090C);box-shadow:0 1px 0 var(--fp-hinge,rgba(255,255,255,.12))}
.flap-board .fp-plate:has(>.fp-tile)::after{display:none}
.flap-board .fp-face{position:absolute;inset:0;display:grid;place-items:center;transition:filter .2s}
.flap-board .fp-face>.sym{position:relative;width:88%;height:88%}
.flap-board .fp-face>.sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.flap-board .fp-face.fly{opacity:.5}

/* a Flip Tile: segments on their bands, dark slits between them */
.flap-board .fp-tile{display:grid;place-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:max(2px,calc(var(--cell)*.03));padding:max(1px,calc(var(--cell)*.025));background:var(--fp-slit,#07090C)}
/* two facets: the upper and the lower flap; three: the upper flap whole, the lower one split; four: a 2 × 2 (every
   segment at least half a plate tall, so a glyph stays readable on a phone) */
.flap-board .fp-tile.n2>.fp-seg,.flap-board .fp-tile.n3>.fp-seg:first-child{grid-column:1/-1}
.flap-board .fp-tile:is(.n5,.n7)>.fp-seg:first-child{grid-column:1/-1}
.flap-board .fp-seg{position:relative;display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;border-radius:max(2px,calc(var(--cell)*.03));background:var(--band,#1E232B);transition:filter .2s,box-shadow .2s}
.flap-board .fp-seg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07) 0 50%,rgba(0,0,0,.14) 50%)}
.flap-board .fp-seg img{height:84%;max-width:84%;aspect-ratio:1;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.flap-board .fp-seg.blank{background:var(--fp-plate-lo,#22262D)}
.flap-board .fp-cell.tile{cursor:help}

/* wins: the cell ringed, the rest dimmed; in a tile the winning symbol's segment ringed, the others dimmed */
.flap-board .fp-cell.win .fp-plate{box-shadow:0 0 0 2px var(--fp-win,#FEEF20),0 0 14px var(--fp-win-glow,rgba(254,239,32,.55))}
.flap-board .fp-cell.win .fp-face>.sym{animation:fp-throb 420ms var(--ease-std,ease-in-out) infinite alternate}
.flap-board .fp-cell.dim .fp-face{filter:brightness(.38) saturate(.6)}
.flap-board .fp-seg.hit{box-shadow:inset 0 0 0 2px var(--fp-win,#FEEF20)}
.flap-board .fp-seg.off{filter:brightness(.42) saturate(.5)}
/* a real (re)trigger only: the reels after the last pass but one glow while they keep turning */
.flap-board .fp-cell.tease .fp-plate{box-shadow:0 0 12px 2px var(--fp-tease,#27F3CD)}
/* a Flip Tile in a paid spin lifts once as it lands */
.flap-board .fp-cell.shown .fp-plate{animation:fp-shown .5s ease-out}

/* free spins: a held tile keeps an amber lamp; new ones are stamped, grown ones pulse; a pass under one shows a struck
   ticket corner */
.flap-board .fp-cell.held .fp-plate{box-shadow:0 0 0 2px var(--fp-held,#F2B134)}
.flap-board .fp-cell.held.win .fp-plate{box-shadow:0 0 0 2px var(--fp-win,#FEEF20),0 0 0 4px var(--fp-held,#F2B134),0 0 14px var(--fp-win-glow,rgba(254,239,32,.55))}
.flap-board .fp-lamp{position:absolute;z-index:3;top:calc(var(--cell)*.01);right:calc(var(--cell)*.01);width:max(9px,calc(var(--cell)*.14));height:max(9px,calc(var(--cell)*.14));border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 35%,var(--fp-held-hi,#FFE7A8),var(--fp-held,#F2B134) 60%);box-shadow:0 0 0 1.5px #07090C,0 0 6px var(--fp-held,#F2B134)}
.flap-board .fp-cell.fresh .fp-plate{animation:fp-stamp .46s cubic-bezier(.2,.9,.3,1.25)}
.flap-board .fp-cell.grew .fp-plate{animation:fp-grow .42s ease-out}
.flap-board .fp-under{position:absolute;z-index:3;right:calc(var(--cell)*.02);bottom:calc(var(--cell)*.03);width:calc(var(--cell)*.32);height:calc(var(--cell)*.18);pointer-events:none;transform:rotate(-10deg);
  background:linear-gradient(160deg,transparent 0 44%,var(--fp-ticket-edge,#B83D27) 44% 56%,transparent 56%),var(--fp-ticket,#F4EBD0);clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,0 70%);box-shadow:inset 0 0 0 1px #07090C}
@keyframes fp-throb{to{transform:scale(1.06)}}
@keyframes fp-shown{0%{transform:translateY(-6%) scale(1.04)}100%{transform:none}}
@keyframes fp-stamp{0%{transform:scale(1.22);opacity:.4}100%{transform:none;opacity:1}}
@keyframes fp-grow{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
/* reduced motion: no throb, lift, stamp or pulse (flap.js cross-fades the faces instead of turning them) */
body.still .flap-board .fp-cell .fp-plate,body.still .flap-board .fp-cell .fp-face>.sym{animation:none!important}
@media (prefers-reduced-motion:reduce){.flap-board .fp-cell .fp-plate,.flap-board .fp-cell .fp-face>.sym{animation:none!important}}
/* phones: the counter alone on its row (no formula) */
@media (max-width:860px),(max-aspect-ratio:4/5){.flap-board .fp-formula{display:none}}