/* Pull board (Second Pull games, boards/pull.js): three wide reels (--cw wide, --cell a row) behind one glass, the thread
   of the centre line over row --row, the rows above and below it shaded, a lamp over every reel (HOLD / PULL, steady —
   never blinking) and the nickel shutters that drop over a held reel's shaded rows. Structure only; colours come from
   the skin: --paper (the reel band), --window-bg, --window-pad, --window-radius, --reel-gap-w, --off-shade, --thread,
   --thread-pin, --glass, --lamp-off, --lamp-hold, --lamp-hold-ink, --lamp-hold-glow, --lamp-pull, --lamp-pull-ink,
   --shutter, --shutter-ink, --win-ring, --win-glow. Animated properties: transform and opacity only (the spinning blur
   is a static filter while a strip moves). */
.pull-board{display:flex;flex-direction:column;align-items:center;gap:6px}
.pull-board .lamps,.pull-board .reels{display:grid;grid-template-columns:repeat(var(--reels,3),var(--cw,var(--cell)));gap:var(--reel-gap-w,8px)}
.pull-board .lamps{padding:0 var(--window-pad,8px)}
.pull-board .lamp{justify-self:center;display:grid;place-items:center;min-width:min(calc(var(--cw,var(--cell))*.62),120px);height:clamp(18px,calc(var(--cell)*.2),26px);padding:0 8px;border-radius:999px;
  background:var(--lamp-off,#3A2A1C);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 0 1.5px var(--lamp-rim,rgba(0,0,0,.35))}
.pull-board .lamp b{visibility:hidden;font-family:var(--ui);font-weight:600;font-size:clamp(11px,calc(var(--cell)*.12),15px);line-height:1;letter-spacing:.16em}
.pull-board .lamp.on b{visibility:visible}
.pull-board .lamp.on[data-mode="hold"]{background:var(--lamp-hold,#FFD54A);box-shadow:0 0 12px var(--lamp-hold-glow,rgba(255,213,74,.7)),inset 0 -2px 3px rgba(0,0,0,.22),0 0 0 1.5px var(--lamp-rim,rgba(0,0,0,.35))}
.pull-board .lamp.on[data-mode="hold"] b{color:var(--lamp-hold-ink,#2A1A05)}
.pull-board .lamp.on[data-mode="pull"]{background:var(--lamp-pull,#F4EFE6);box-shadow:inset 0 -2px 3px rgba(0,0,0,.18),0 0 0 1.5px var(--lamp-rim,rgba(0,0,0,.35))}
.pull-board .lamp.on[data-mode="pull"] b{color:var(--lamp-pull-ink,#2A1A05)}
.pull-board .window{position:relative;overflow:hidden;padding:var(--window-pad,8px);border-radius:var(--window-radius,10px);background:var(--window-bg,#1A120A)}
.pull-board .preel{position:relative;height:calc(var(--cell)*var(--rows,3));overflow:hidden;border-radius:var(--band-radius,3px);background:var(--paper,#F2E8D2)}
.pull-board .strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.pull-board .preel.spinning .strip{filter:blur(1.2px)}
.pull-board .cell{position:relative;height:var(--cell);display:flex;align-items:center;justify-content:center}
.pull-board .cell .sym{position:relative;width:calc(var(--cell)*.84);height:calc(var(--cell)*.84)}
.pull-board .cell .sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
/* the rows above and below the line, shaded behind the glass (40 %) */
.pull-board .cell.off::after{content:"";position:absolute;inset:0;background:var(--off-shade,rgba(40,24,8,.4));pointer-events:none}
.pull-board .thread{position:absolute;left:0;right:0;z-index:3;top:calc(var(--window-pad,8px) + var(--cell)*(var(--row,1) + .5));height:3px;margin-top:-1.5px;background:var(--thread,#B3151C);box-shadow:0 1px 1px rgba(0,0,0,.35);pointer-events:none}
.pull-board .thread::before,.pull-board .thread::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--thread-pin,#D9DDE1);box-shadow:0 0 0 1.5px rgba(0,0,0,.45)}
.pull-board .thread::before{left:1px}.pull-board .thread::after{right:1px}
.pull-board .glass{position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--glass,linear-gradient(115deg,rgba(255,255,255,.14),transparent 30%,transparent 70%,rgba(255,255,255,.06)))}
/* the hold: nickel shutters over a held reel's shaded rows (its line cell stays in view) */
.pull-board .shutter{position:absolute;left:0;right:0;z-index:2;visibility:hidden;background:var(--shutter,#C9CED3);transition:transform .26s cubic-bezier(.3,.7,.3,1),visibility 0s linear .26s}
.pull-board .shutter.sh-top{top:0;height:calc(var(--cell)*var(--row,1));transform:translateY(-101%);display:grid;place-items:center}
.pull-board .shutter.sh-bot{bottom:0;height:calc(var(--cell)*(var(--rows,3) - var(--row,1) - 1));transform:translateY(101%)}
.pull-board .preel.held .shutter{visibility:visible;transform:none;transition:transform .26s cubic-bezier(.3,.7,.3,1)}
.pull-board .shutter b{font-family:var(--display);font-weight:400;font-size:clamp(13px,calc(var(--cell)*.2),26px);line-height:1;letter-spacing:.12em;color:var(--shutter-ink,#231B14)}
/* the clutch: a landed reel catches with a short clack */
.pull-board .preel.clack .strip{animation:pb-clack .15s ease-out}
@keyframes pb-clack{0%{transform:translateY(calc(var(--cell)*.07))}55%{transform:translateY(calc(var(--cell)*-.02))}100%{transform:none}}
/* the paid cells: a steady ring and a gentle swell (no blinking); a pay of at most the bet only gets the ring */
.pull-board .cell.win::before{content:"";position:absolute;inset:5% 4%;z-index:1;border-radius:8px;border:3px solid var(--win-ring,#FFD54A);box-shadow:0 0 12px var(--win-glow,rgba(255,213,74,.55));pointer-events:none}
.pull-board .cell.win .sym{animation:pb-swell .7s ease-in-out infinite alternate}
.pull-board.small-win .cell.win .sym{animation:none}
.pull-board .cell.dim .sym{filter:brightness(.55) saturate(.6)}
@keyframes pb-swell{to{transform:scale(1.07)}}
body.still .pull-board .cell.win .sym,body.still .pull-board .preel.clack .strip{animation:none}
body.still .pull-board .shutter{transition:none}