/* Reels board (shared by reels-lines games). Colours and decoration come from the game's skin. */
.reels-board{display:grid;grid-template-columns:auto auto auto;align-items:stretch;gap:8px}
.reels-board .window{position:relative;overflow:hidden;border-radius:var(--window-radius,10px);background:var(--window-bg,rgba(0,0,0,.55))}
.reels-board .reels{display:grid;grid-template-columns:repeat(var(--reels,5),var(--cell))}
.reels-board .reel{position:relative;height:calc(var(--cell)*var(--rows,3));overflow:hidden;border-right:1px solid var(--reel-sep,rgba(255,255,255,.08))}
.reels-board .reel:last-child{border-right:0}
.reels-board .strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.reels-board .reel.spinning .strip{filter:blur(var(--spin-blur,1.4px)) brightness(.85)}
.reels-board .reel.tease{box-shadow:inset 0 0 26px var(--accent)}
.reels-board .cell{height:var(--cell);display:flex;align-items:center;justify-content:center;position:relative}
.reels-board .sym{position:relative;width:88%;height:88%;transition:transform .2s,filter .2s,opacity var(--t-base,220ms) var(--ease-std,ease)}
.reels-board .sym img,.ptc .sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
/* win: the symbol breathes (scale 1 → 1.06, 420 ms each way) inside a lit frame that draws itself in; the rest step back
   (a static filter, as before: skins that dim with their own filter must not be dimmed twice — a skin may use
   opacity:.45 instead). Landing: a 5 % overshoot that settles (art direction §3.3) — no squash and stretch. */
.reels-board .cell.win .sym{animation:rb-throb 420ms var(--ease-std,ease-in-out) infinite alternate}
.reels-board .cell.win::after{content:"";position:absolute;inset:5%;border-radius:var(--win-radius,12px);border:2px solid var(--primary);box-shadow:0 0 14px var(--win-glow),inset 0 0 12px color-mix(in srgb,var(--win-glow) 28%,transparent);animation:rb-lit .3s var(--ease-out,ease-out) both}
.reels-board .cell.dim .sym{filter:brightness(.38) saturate(.6)}
.reels-board .cell.landed .sym{animation:rb-land .3s var(--ease-out,ease-out)}
@keyframes rb-throb{to{transform:scale(1.06)}}
@keyframes rb-lit{from{opacity:0;transform:scale(.92)}}
@keyframes rb-land{0%{transform:translateY(-5%)}55%{transform:translateY(2.5%)}100%{transform:none}}
/* expanded wild: an overlay that fills the reel (art from the game's skin); "grow" plays when it appears */
.reels-board .xcol{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center}
.reels-board .xcol.grow{animation:rb-grow .55s var(--expand-ease,cubic-bezier(.2,1.35,.4,1)) both}
@keyframes rb-grow{from{clip-path:inset(42% 0 42% 0);filter:brightness(2)}to{clip-path:inset(0 0 0 0);filter:none}}
.reels-board svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.reels-board svg.lines polyline{animation:rb-line .3s var(--ease-out,ease-out) both} /* each shown line fades in */
@keyframes rb-line{from{opacity:0}}
.reels-board .pegs{display:grid;grid-template-rows:repeat(var(--rows,3),var(--cell));align-content:center}
/* each row's pegs beside it, in --peg-cols columns of 24 px rows (reels.js fitPegs picks the fewest that fit the row;
   a block of two or more columns is centred on its row: --peg-align) */
.reels-board .pegs .slot{display:grid;grid-template-columns:repeat(var(--peg-cols,1),auto);grid-auto-rows:24px;gap:2px;align-content:var(--peg-align,space-evenly);justify-content:center;justify-items:center;min-height:0}
/* quiet markers: a plate in the frame's colour (--peg-bg) with the number in the text colour (--peg-ink); the line's own
   colour (--pc) is only a 3 px bar along the bottom — and the whole ring and glow when that line is shown or focused */
.reels-board .peg{--peg-bg-c:var(--peg-bg,color-mix(in srgb,var(--bg2) 86%,var(--primary)));width:26px;height:24px;border-radius:5px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;display:grid;place-items:center;
  color:var(--peg-ink,color-mix(in srgb,var(--ink) 84%,var(--peg-bg-c)));background:var(--peg-bg-c);border:1px solid var(--line);box-shadow:inset 0 -3px 0 var(--pc);padding:0;cursor:default;
  transition:box-shadow var(--t-fast,140ms) var(--ease-std,ease),color var(--t-fast,140ms)}
.reels-board .peg.on,.reels-board .peg:focus-visible{color:var(--ink);box-shadow:inset 0 -3px 0 var(--pc),0 0 0 2px var(--pc),0 0 12px color-mix(in srgb,var(--pc) 70%,transparent)}
/* the fitted pegs keep the full 24 px height and the fitted columns whatever size a skin gives them (WCAG 2.5.8) */
.reels-board.peg-fit>.pegs>.slot{display:grid;grid-template-columns:repeat(var(--peg-cols,1),auto);grid-auto-rows:24px}
.reels-board.peg-fit>.pegs>.slot>.peg{height:24px}
/* no room for full-size pegs (a short board, or none beside the reels): hidden as on phones; the paytable draws the lines */
.reels-board.pegs-off{gap:0;grid-template-columns:auto}
.reels-board.pegs-off>.pegs{display:none}
.lines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.mini{padding:6px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.mini .g{display:grid;grid-template-columns:repeat(var(--reels,5),1fr);gap:2px;margin-top:4px}
.mini .g i{aspect-ratio:1.4;border-radius:2px;background:rgba(255,255,255,.08)}.mini .g i.on{background:var(--pc)}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .reels-board{gap:0;grid-template-columns:auto}
  .reels-board .pegs{display:none} /* phones: lines are shown on the reels; markers would not fit */
}