/* Royal Ledger board (reels-lines games with features.royalLedger), on top of reels.css. Wide screens: the ledger
   stands left of the reels (ledger | pegs | window | pegs, class lg-side); phones and short wide screens: it sits in a
   band above the reels (lg-top), in two columns on a board narrower than 336 px (lg-two). ledger.js picks the mode and
   sets --cell and --ledger-w. Colours come from the game's skin: --lg-bg (the ledger's ground), --lg-ink (its text,
   keep >= 4.5:1 on --lg-bg), --lg-muted (secondary text, >= 4.5:1 too), --lg-edge (rules and stitches), --lg-pip (an
   empty pip's ring), --lg-pip-on (a stamped pip), --lg-filled (a full row's ground), --lg-filled-ink (its text,
   >= 4.5:1), --lg-ribbon (the unfurling ribbon), --lg-glow (the Crown's local glow: never red), --lg-pop-ink /
   --lg-pop-stroke (rising amounts), --stamp-ink / --stamp-bg (the SEALED tag on a seal). Animations move transform /
   opacity only. */
.ledger-board .ledger{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px 10px 10px;border-radius:var(--lg-radius,8px);
  background:var(--lg-bg,#F2E8D2);color:var(--lg-ink,#2A1810);box-shadow:inset 0 0 0 2px var(--lg-edge,#7A5A36),inset 0 0 0 5px var(--lg-bg,#F2E8D2),inset 0 0 0 6px color-mix(in srgb,var(--lg-edge,#7A5A36) 55%,transparent);
  transition:box-shadow .4s}
.ledger-board .lg-head{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;line-height:1.15}
.ledger-board .lg-title{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.6vw,22px);color:var(--lg-title,var(--lg-ink,#2A1810))}
.ledger-board .lg-note{font-size:12px;font-weight:600;color:var(--lg-muted,#5A4026)}
.ledger-board .lg-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
/* a row: crest | name over pips | prize over count */
.ledger-board .lg-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"crest name prize" "crest pips count";align-items:center;column-gap:8px;row-gap:2px;
  min-height:44px;padding:4px 8px 4px 6px;border-radius:6px;background:color-mix(in srgb,var(--lg-bg,#F2E8D2) 82%,var(--lg-edge,#7A5A36));isolation:isolate}
.ledger-board .lg-crest{grid-area:crest;width:34px;height:34px;display:grid;place-items:center}
.ledger-board .lg-crest img,.ledger-board .crest-stamp img,.lg-fly img{display:block;width:100%;height:100%;-webkit-user-drag:none}
.ledger-board .lg-name{grid-area:name;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger-board .lg-pips{grid-area:pips;display:flex;gap:4px;align-items:center}
.ledger-board .lg-pips i{display:block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--lg-pip,#7A5A36);transition:background .2s,transform .2s}
.ledger-board .lg-pips i.on{background:radial-gradient(circle at 38% 34%,color-mix(in srgb,var(--lg-pip-on,#A82820) 55%,#fff),var(--lg-pip-on,#A82820) 60%);box-shadow:0 0 0 1.5px var(--lg-ink,#2A1810)}
.ledger-board .lg-count{grid-area:count;justify-self:end;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--lg-muted,#5A4026)}
.ledger-board .lg-prize{grid-area:prize;justify-self:end;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.ledger-board .lg-prize b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--lg-ink,#2A1810)}
/* a full row: its ribbon stays unfurled behind it; SEALED in the count */
.ledger-board .lg-ribbon{position:absolute;inset:3px;z-index:-1;border-radius:4px;transform:scaleX(0);transform-origin:left center;
  background:repeating-linear-gradient(90deg,transparent 0 5px,color-mix(in srgb,var(--lg-filled-ink,#2A1810) 9%,transparent) 5px 6px),var(--lg-filled,#E9C46A)}
.ledger-board .lg-row.filled .lg-ribbon{transform:none}
.ledger-board .lg-row.filled .lg-name,.ledger-board .lg-row.filled .lg-prize b,.ledger-board .lg-row.filled .lg-count{color:var(--lg-filled-ink,#2A1810)}
.ledger-board .lg-row.unfurl .lg-ribbon{animation:lg-unfurl .62s cubic-bezier(.2,.9,.25,1.05) both}
.ledger-board .lg-row.owed{box-shadow:inset 0 0 0 2px var(--lg-filled-ink,#2A1810)}
.ledger-board .lg-row.paid{box-shadow:0 0 0 2px var(--lg-glow,#F2CF73),0 0 12px var(--lg-glow,#F2CF73)}
.ledger-board .ledger.on .lg-row:not(.filled){background:color-mix(in srgb,var(--lg-bg,#F2E8D2) 70%,var(--lg-edge,#7A5A36))}
.ledger-board .ledger.glow{box-shadow:inset 0 0 0 2px var(--lg-edge,#7A5A36),0 0 0 3px var(--lg-glow,#F2CF73),0 0 28px var(--lg-glow,#F2CF73)}
.ledger-board .ledger.ring{box-shadow:inset 0 0 0 2px var(--lg-edge,#7A5A36),0 0 0 3px var(--lg-glow,#F2CF73)}
.ledger-board .lg-pop{position:absolute;right:6px;top:50%;z-index:3;pointer-events:none;white-space:nowrap;font:800 15px/1 var(--ui);
  color:var(--lg-pop-ink,#FFF6DA);-webkit-text-stroke:3px var(--lg-pop-stroke,#2A1810);paint-order:stroke fill;font-variant-numeric:tabular-nums;animation:lg-pop 1.4s ease-out forwards}
.ledger-board .lg-pop.gift{right:auto;left:42px}
/* a crest pressed into a seal on the reels (SEALED under it when its row is already full) */
.ledger-board .crest-stamp{position:absolute;left:29%;top:25%;width:42%;height:42%;z-index:2;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.ledger-board .crest-stamp em{position:absolute;left:50%;top:104%;transform:translateX(-50%);padding:0 4px;border-radius:3px;font:800 max(9px,calc(var(--cell)*.11))/1.3 var(--ui);font-style:normal;letter-spacing:.04em;
  color:var(--stamp-ink,#FFF6DA);background:var(--stamp-bg,#2A1810);white-space:nowrap}
.ledger-board .crest-stamp.sealed img{filter:saturate(.35) brightness(.9)}
.lg-fly{position:fixed;z-index:35;width:28px;height:28px;pointer-events:none;will-change:transform}
@keyframes lg-unfurl{0%{transform:scaleX(0) skewX(-14deg)}70%{transform:scaleX(1.03) skewX(3deg)}100%{transform:none}}
@keyframes lg-pop{0%{transform:translateY(-50%) scale(.7);opacity:0}15%{transform:translateY(-80%) scale(1.06);opacity:1}75%{opacity:1}100%{transform:translateY(-190%);opacity:0}}

/* beside the reels (wide screens) */
.ledger-board.lg-side{grid-template-columns:auto auto auto auto;column-gap:10px}
.ledger-board.lg-side>.ledger{grid-column:1;grid-row:1;align-self:center;width:var(--ledger-w,220px)}
.ledger-board.lg-side>.pegs.left{grid-column:2;grid-row:1}.ledger-board.lg-side>.window{grid-column:3;grid-row:1}.ledger-board.lg-side>.pegs.right{grid-column:4;grid-row:1}
.ledger-board.lg-side.pegs-off{grid-template-columns:auto auto}.ledger-board.lg-side.pegs-off>.window{grid-column:2}
/* above the reels: one line a row (28 px), the pips and the count beside the name */
.ledger-board.lg-top{grid-template-columns:auto auto auto;row-gap:6px}
.ledger-board.lg-top>.ledger{grid-column:1/-1;grid-row:1;justify-self:center;width:var(--ledger-top-w,calc(var(--cell)*var(--reels,5)));max-width:100%;padding:5px 8px 7px;gap:3px}
.ledger-board.lg-top>.window{justify-self:center}
.ledger-board.lg-top>.pegs.left{grid-column:1;grid-row:2}.ledger-board.lg-top>.window{grid-column:2;grid-row:2}.ledger-board.lg-top>.pegs.right{grid-column:3;grid-row:2}
.ledger-board.lg-top.pegs-off{grid-template-columns:auto}.ledger-board.lg-top.pegs-off>.window{grid-column:1}
.ledger-board.lg-top .lg-head{flex-direction:row;justify-content:center;gap:10px;align-items:baseline}
.ledger-board.lg-top .lg-title{font-size:17px}.ledger-board.lg-top .lg-note{font-size:11.5px}
.ledger-board.lg-top .lg-rows{gap:2px}
.ledger-board.lg-top .lg-row{grid-template-columns:24px minmax(0,1fr) auto auto auto;grid-template-areas:"crest name pips count prize";min-height:28px;height:28px;padding:0 6px 0 4px;column-gap:6px}
.ledger-board.lg-top .lg-crest{width:24px;height:24px}
.ledger-board.lg-top .lg-name{font-size:14px}
.ledger-board.lg-top .lg-pips{gap:3px}.ledger-board.lg-top .lg-pips i{width:9px;height:9px}
.ledger-board.lg-top .lg-count{min-width:2.6em;text-align:right}
.ledger-board.lg-top .lg-prize b{font-size:15px}
/* two columns (boards under 336 px): one 26 px line a row — crest, count and prize. The crest's shape names the row
   (the paytable pairs shapes and names; the row's spoken label says the name): a name cut to one or two letters would
   say nothing. No title (the panel's spoken name); the note stays visible on one line above the rows. */
.ledger-board.lg-two>.ledger{padding:3px 5px 5px;gap:2px}
.ledger-board.lg-two .lg-title{display:none}
.ledger-board.lg-two .lg-note{font-size:11px;line-height:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger-board.lg-two .lg-rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 3px}
.ledger-board.lg-two .lg-row{grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:"crest count prize";height:26px;min-height:26px;padding:0 4px 0 3px;column-gap:5px}
.ledger-board.lg-two .lg-crest{width:20px;height:20px}
.ledger-board.lg-two .lg-pips,.ledger-board.lg-two .lg-name{display:none}
.ledger-board.lg-two .lg-prize{gap:0}.ledger-board.lg-two .lg-prize b{font-size:14px}
.ledger-board.lg-two .lg-count{font-size:12px;min-width:0;justify-self:start;text-align:left}
.ledger-board.lg-two .lg-pop{font-size:13px}.ledger-board.lg-two .lg-pop.gift{left:26px}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .ledger-board.lg-top{grid-template-columns:auto;column-gap:0}
  .ledger-board.lg-top>.window{grid-column:1}
}
/* reduced motion: no unfurl, no flight, no glow pulse; no rising amounts — a pop is a still, solid chip over the row's
   prize (ledger.js keeps one a row: the "+2 SPINS" chip replaces the prize chip, never text on top of text) */
@media (prefers-reduced-motion:reduce){
  .ledger-board .lg-row.unfurl .lg-ribbon{animation:none}
  .ledger-board .lg-pop{animation:none!important}
  .ledger-board .ledger,.ledger-board .lg-pips i{transition:none}
}
body.still .ledger-board .lg-row.unfurl .lg-ribbon{animation:none}
body.still .ledger-board .lg-pop{animation:lg-fade 1.3s linear forwards}
@media (prefers-reduced-motion:reduce){
  .ledger-board .lg-pop,.ledger-board .lg-pop.gift{left:auto!important;right:3px!important;transform:translateY(-50%);padding:2px 6px;border-radius:4px;line-height:1.2;
    background:var(--lg-pop-stroke,#2A1810);-webkit-text-stroke:0;box-shadow:0 0 0 1px var(--lg-pop-ink,#FFF6DA)}
}
body.still .ledger-board .lg-pop,body.still .ledger-board .lg-pop.gift{left:auto!important;right:3px!important;transform:translateY(-50%);padding:2px 6px;border-radius:4px;line-height:1.2;
  background:var(--lg-pop-stroke,#2A1810);-webkit-text-stroke:0;box-shadow:0 0 0 1px var(--lg-pop-ink,#FFF6DA)}
/* two columns: the chip covers the whole row right of the crest (count and prize), its text centred */
@media (prefers-reduced-motion:reduce){.ledger-board.lg-two .lg-pop,.ledger-board.lg-two .lg-pop.gift{left:26px!important;text-align:center}}
body.still .ledger-board.lg-two .lg-pop,body.still .ledger-board.lg-two .lg-pop.gift{left:26px!important;text-align:center}
@keyframes lg-fade{0%,85%{opacity:1}100%{opacity:0}}