/* Ludo: a printed board in a walnut frame, Ankara-printed yards, a pair of ivory dice and glossy round plastic seeds like draughtsmen. Shares the felt-and-paper tokens of the app. */
:root{
  --lc0:#d8222b;--lc0d:#7a0c12;--lc1:#1f9a52;--lc1d:#0b4d28;--lc2:#f2b92b;--lc2d:#8a6200;--lc3:#2f6fe0;--lc3d:#143a85;
}
.c0{--k:var(--lc0);--k2:var(--lc0d)}.c1{--k:var(--lc1);--k2:var(--lc1d)}.c2{--k:var(--lc2);--k2:var(--lc2d)}.c3{--k:var(--lc3);--k2:var(--lc3d)}

.lb{--bs:clamp(250px,min(100vw - 28px,100dvh - 338px),620px)}
.lb .brand{font-size:clamp(20px,6vw,28px)}
.lb-main{width:100%;align-self:stretch;display:grid;gap:10px;justify-items:center;grid-template-areas:"strips" "stage" "dock";grid-template-columns:minmax(0,var(--bs));justify-content:center;flex:1;align-content:start}
.lb-strips{grid-area:strips}.lb-stage{grid-area:stage}.lb-dock{grid-area:dock}

/* players: a seed, the name, and four little sockets that fill as seeds get home */
.lb-strips{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lp{position:relative;display:flex;align-items:center;gap:7px;min-width:0;min-height:46px;padding:5px 9px 5px 6px;border-radius:12px;overflow:hidden;
  background:linear-gradient(90deg,color-mix(in srgb,var(--k) 22%,transparent),rgba(0,0,0,.2) 46%);border:1px solid var(--line);transition:border-color .25s,background .25s,box-shadow .25s}
.lp::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--k)}
.lp.turn{border-color:rgba(244,197,66,.8);box-shadow:0 0 0 3px rgba(244,197,66,.14),inset 0 0 0 1px rgba(244,197,66,.25)}
.lp.out{opacity:.5}
.lp .lav{width:30px;height:30px;flex:none;display:block;margin-left:1px}
.lp .nm{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;min-width:0;flex:1;line-height:1.15}
.lp .l1{display:flex;flex-wrap:wrap;gap:2px 5px;align-items:center;min-width:0}
.lp .nm b{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.lp .tag{font-size:9.5px;padding:2px 5px;white-space:nowrap}
.lp .tag.turn,.lp .tag.win{background:var(--gold);color:var(--gold-ink);white-space:nowrap}
.homes{display:flex;gap:4px;flex:none}
.homes i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 0 0 1.5px color-mix(in srgb,var(--k) 70%,transparent)}
.homes i.on{background:radial-gradient(circle at 35% 30%,#fff8 0 18%,var(--k) 45%,var(--k2));box-shadow:0 0 0 1.5px var(--k),0 0 6px color-mix(in srgb,var(--k) 70%,transparent)}
/* two yards: the stripe is split between both colours, and two seeds stand side by side, the second a little behind */
.lp.duo::before{background:linear-gradient(var(--k) 50%,var(--kb) 50%)}
.lav.duo{position:relative;width:36px}
.lav.duo>span{position:absolute;top:50%;width:24px;height:24px;margin-top:-12px}
.lav.duo>span:first-child{left:0;z-index:1}.lav.duo>span:last-child{right:0;top:38%}
.homes .hn{white-space:nowrap;align-self:center;margin-left:3px;font-size:10.5px;line-height:1;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* eight sockets fit a 360px phone: smaller and closer */
.homes.many{gap:3px}.homes.many i{width:7px;height:7px;box-shadow:inset 0 1px 1.5px rgba(0,0,0,.6),0 0 0 1.2px color-mix(in srgb,var(--k) 70%,transparent)}
.homes.many i.on{box-shadow:0 0 0 1.2px var(--k),0 0 4px color-mix(in srgb,var(--k) 70%,transparent)}
/* a seed that has just arrived home lights its socket with a small pop */
.homes i.pop{animation:lbdot .5s cubic-bezier(.2,.8,.3,1.5) both}
.homes .hn.pop{animation:lbdot .5s cubic-bezier(.2,.8,.3,1.5) both}
@keyframes lbdot{0%{transform:scale(.2);filter:brightness(2)}60%{transform:scale(1.5)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.homes i.pop,.homes .hn.pop{animation:none}}
@media (max-width:420px){.lp .tag.turn,.lp .tag.bot{display:none}.lp .nm b{font-size:13px}.lp{padding-right:7px;gap:5px}.lp .lav.duo{width:32px}.lav.duo>span{width:22px;height:22px;margin-top:-11px}.homes.many{gap:2px}.homes.many i{width:6px;height:6px}.homes .hn{font-size:10px;margin-left:2px}}

/* seeds, drawn once per colour */
.seedsvg{display:block;width:100%;height:100%;overflow:visible}

/* the board: a walnut frame around a printed board, lit from the upper left */
.lb-stage{position:relative;width:var(--bs);max-width:100%}
.lb-frame{position:relative;width:100%;padding:3.4%;border-radius:14px;
  background:
    radial-gradient(120% 90% at 22% 12%,rgba(255,214,150,.22),transparent 55%),
    repeating-linear-gradient(97deg,rgba(40,16,2,.0) 0 3px,rgba(40,16,2,.16) 3px 4px,rgba(255,220,160,.05) 4px 6px,rgba(40,16,2,0) 6px 11px),
    repeating-linear-gradient(83deg,rgba(255,220,160,.04) 0 9px,rgba(40,16,2,.12) 9px 10px,transparent 10px 23px),
    linear-gradient(155deg,#a0693a,#76461f 45%,#4f2c12);
  box-shadow:0 22px 40px -8px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.35),inset 0 1.5px 0 rgba(255,226,175,.45),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.25)}
.lb-grid{position:relative;aspect-ratio:1;border-radius:3px;overflow:visible;
  box-shadow:0 0 0 1.5px rgba(30,12,0,.75),0 0 0 3px rgba(255,214,140,.22),0 1px 6px 2px rgba(0,0,0,.35)}
.lb-board,.lb-pcs,.lb-fx{position:absolute;inset:0}
.lb-board svg{display:block;width:100%;height:100%;border-radius:3px}
.lb-pcs,.lb-fx{pointer-events:none}
.lb-fx{z-index:7}
/* a seed is a round disc in a square box (the drawing is 40 x 40); the middle of the piece, 52.5% down, sits on the middle of its square */
.pw{--sz:calc(var(--s) * 7.6%);position:absolute;width:var(--sz);height:var(--sz);left:calc(var(--x) * 6.6667% - var(--sz) / 2);top:calc(var(--y) * 6.6667% - var(--sz) * .525);
  padding:0;margin:0;border:0;background:none;min-width:0;min-height:0;border-radius:0;filter:drop-shadow(0 .5px .4px rgba(0,0,0,.45));transition:left .2s,top .2s}
.pw.yard{--sz:calc(var(--s) * 8.6%)}
/* pawns you can tap stand above the dice, so a die never swallows the tap */
button.pw{cursor:pointer;pointer-events:auto;z-index:7;-webkit-tap-highlight-color:transparent}
button.pw::after{content:'';position:absolute;inset:-16%;border-radius:50%}
.pw.go{animation:lbglow 1.15s ease-in-out infinite}
.pw.go::before{content:'';position:absolute;left:3%;right:3%;top:6%;bottom:2%;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 9px rgba(244,197,66,.9),inset 0 0 6px rgba(244,197,66,.5);animation:lbring 1.15s ease-in-out infinite}
.pw.go:focus-visible{outline:none}.pw.go:focus-visible::before{border-width:3px;background:rgba(244,197,66,.35)}
@keyframes lbglow{50%{filter:drop-shadow(0 1px .6px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(255,214,90,.95));translate:0 -5%}}
@keyframes lbring{50%{transform:scale(1.16);opacity:.55}}
@media (prefers-reduced-motion:reduce){.pw.go{animation:none;filter:drop-shadow(0 0 5px rgba(255,214,90,.95))}.pw.go::before{animation:none}}
.pw.done{opacity:.97}

/* seeds sharing a square. One colour on one spot stands as a tower, each disc a step up so all of them show, the count on
   top from three up. Different seeds stand side by side, the ones you can move in front. Only the top disc of a tower wears
   the gold ring. The front seed you can move takes taps for the whole square: a round target at least 44px across, centred
   on the square (--hx/--hy/--hs from the view). Seeds on squares of their own stand above that halo, so it never steals them. */
button.pw{z-index:8}
button.pw.stk{z-index:7}
.pw.under::before{display:none}
button.pw.hit::after{inset:auto;left:calc(50% + var(--hx,0) * 100%);top:calc(52.5% + var(--hy,0) * 100%);width:max(calc(var(--hs,1.3) * 100%),44px);aspect-ratio:1;height:auto;translate:-50% -50%}
.pw-n{position:absolute;right:-14%;top:-16%;min-width:1.5em;height:1.5em;padding:0 .3em;display:grid;place-items:center;border-radius:.75em;
  font:400 max(9px,calc(var(--s,1) * 3.3cqw))/1 var(--display);color:#2a1608;font-variant-numeric:tabular-nums;pointer-events:none;
  background:radial-gradient(120% 140% at 30% 18%,#fffef8,#f6eed8 55%,#e2d3aa);box-shadow:0 0 0 1.2px var(--k2),0 1px 2px rgba(0,0,0,.55)}
.pw.go .pw-n{box-shadow:0 0 0 1.5px var(--gold),0 0 6px rgba(244,197,66,.8),0 1px 2px rgba(0,0,0,.55)}

/* where a move would land: a dashed ring in the seed's colour on that square (while you press, hover or pick in the chooser) */
.lb-ghost{position:absolute;left:calc(var(--x) * 6.6667%);top:calc(var(--y) * 6.6667%);width:5.6%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  border:2px dashed var(--k);background:radial-gradient(circle,var(--k) 0 22%,rgba(255,250,235,.82) 25%);box-shadow:0 0 0 1.5px rgba(255,250,235,.85),0 1px 3px rgba(40,16,0,.45);opacity:.75}
.lb-ghost.on{opacity:1;border-style:solid;box-shadow:0 0 0 1.5px rgba(255,250,235,.95),0 0 10px 2px color-mix(in srgb,var(--k) 70%,transparent);animation:lbghost 1.1s ease-in-out infinite}
.lb-ghost.home{width:4.4%}
@keyframes lbghost{50%{scale:1.14}}
@media (prefers-reduced-motion:reduce){.lb-ghost.on{animation:none}}

/* which seed? a paper slip pointing at the square, one big round button per seed (keyboard: arrows, Enter, Esc) */
.lb-choose{position:absolute;z-index:12;left:var(--l);top:var(--t);translate:-50% -50%;padding:6px;border-radius:16px;
  background:#f8efd9;border:1.5px solid #8a6a3c;box-shadow:0 10px 22px -6px rgba(20,8,0,.65),0 2px 0 rgba(255,255,255,.6) inset;
  animation:lbchoose .16s cubic-bezier(.2,.8,.3,1.3) both}
.lb-choose.above{transform-origin:var(--tx) 100%}.lb-choose.below{transform-origin:var(--tx) 0}
.lb-choose.left{transform-origin:100% var(--tx)}.lb-choose.right{transform-origin:0 var(--tx)}
.lb-choose::before{content:'';position:absolute;width:12px;height:12px;background:#f8efd9;border:1.5px solid #8a6a3c;border-top:0;border-left:0}
.lb-choose.above::before{left:var(--tx);bottom:-7px;margin-left:-6px;rotate:45deg}
.lb-choose.below::before{left:var(--tx);top:-7px;margin-left:-6px;rotate:225deg}
.lb-choose.left::before{top:var(--tx);right:-7px;margin-top:-6px;rotate:-45deg}
.lb-choose.right::before{top:var(--tx);left:-7px;margin-top:-6px;rotate:135deg}
@keyframes lbchoose{from{transform:scale(.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.lb-choose{animation:none}}
.lb-opts{display:flex;gap:4px}
.lb-opt{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;padding:4px 4px 5px;margin:0;border:0;border-radius:12px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;color:#2a1608}
.lb-opt:hover,.lb-opt:focus-visible{background:color-mix(in srgb,var(--k) 16%,transparent)}
.lb-opt:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.lb-opt:active .lb-os{scale:.94}
.lb-os{position:relative;display:block;width:48px;height:48px;border-radius:50%;padding:5px 5px 4px;
  background:radial-gradient(circle at 50% 45%,#fffef8 0 52%,color-mix(in srgb,var(--k) 22%,#fffef8) 70%);box-shadow:inset 0 0 0 2.5px var(--k),inset 0 -3px 5px rgba(0,0,0,.12),0 1px 2px rgba(60,30,0,.35)}
.lb-os .pw-n{--s:1;right:-6px;top:-5px;font-size:11px}
.lb-ol{font-weight:800;font-size:12.5px;line-height:1;white-space:nowrap}
.lb-ol i{font-style:normal;font-family:var(--display);font-weight:400;font-size:11px;margin-left:4px;color:#8a6a3c}
.burst{position:absolute;z-index:8;border-radius:50%;border:4px solid #ffd45e;box-shadow:0 0 22px 6px rgba(255,212,94,.7),inset 0 0 14px rgba(255,212,94,.6);transform:translate(-50%,-50%)}
/* where a scoring seed settles in the middle: a softer ring in its own colour */
.burst.glint{border:3px solid var(--k);box-shadow:0 0 14px 3px color-mix(in srgb,var(--k) 70%,transparent),inset 0 0 8px rgba(255,255,255,.5)}

.lb .toast{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);width:max-content;max-width:100%;text-align:center;z-index:9}
.lb .toast.show{animation:cbtoast 1.9s ease both}

/* the dock under the board: what is happening, and the throw button */
.lb-dock{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;padding:4px 2px}
.lb-status{flex:1;min-width:0;font-weight:700;font-size:16px;line-height:1.3;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* the dice: two small ivory cubes with drilled pips, lying on the board where they were thrown.
   At rest each is seen square from above, so only its top face shows; while it is thrown the eye moves to the middle of the board (set by the throw animation) so its sides show as it tumbles */
.lb-grid{container-type:inline-size}
.lb-dice{--d:7cqw;position:absolute;z-index:6;width:var(--d);height:var(--d);left:calc(var(--dx,8) * 6.6667% - var(--d) / 2);top:calc(var(--dy,7) * 6.6667% - var(--d) / 2);pointer-events:none;
  transition:translate .35s cubic-bezier(.3,.7,.4,1),opacity .3s,filter .3s}
.lb-dice.unthrown{opacity:0}
.lb-dice.unthrown:has(.canroll){opacity:1}
/* a played die stays where it fell, pushed a little aside and dulled */
.lb-dice.used{translate:calc(var(--ux,0) * 1.6cqw) calc(var(--uy,0) * 1.6cqw);opacity:.48;filter:saturate(.4) brightness(.82)}
@media (prefers-reduced-motion:reduce){.lb-dice{transition:none}}
.dshadow{position:absolute;left:18%;top:24%;width:94%;height:94%;border-radius:26%;background:rgba(22,8,0,.8);filter:blur(2px);transform:rotate(var(--rz,0deg));opacity:.7}
.die{position:absolute;inset:0;padding:0;border:0;background:none;min-width:0;min-height:0;border-radius:0;-webkit-perspective:calc(var(--d) * 5);perspective:calc(var(--d) * 5);-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;-webkit-transform:rotate(var(--rz,0deg));transform:rotate(var(--rz,0deg));cursor:default;-webkit-tap-highlight-color:transparent;transition:opacity .25s}
.die::after{content:'';position:absolute;inset:-48%}
.die.pick::after{inset:-30%}
.die{pointer-events:auto}.die:disabled{pointer-events:none}
.die.idle{opacity:.94}
.cube{position:absolute;inset:0;display:block;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.cube .f{--h:calc(var(--d) / 2);position:absolute;inset:0;border-radius:18%;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:12%;gap:0;
  background:radial-gradient(120% 120% at 28% 20%,#fffef8,#f6eed8 55%,#e2d3aa);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset -1px -2px 3px rgba(110,80,30,.32),inset 1px 1px 2px rgba(255,255,255,.9);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cube .core{position:absolute;inset:3%;background:#e9dcb8;border-radius:8%}
.cube .cx{transform:rotateX(90deg)}.cube .cy{transform:rotateY(90deg)}.cube .cz{transform:none}
.cube .f1{transform:translateZ(var(--h))}
.cube .f6{transform:rotateY(180deg) translateZ(var(--h))}
.cube .f2{transform:rotateY(90deg) translateZ(var(--h))}
.cube .f5{transform:rotateY(-90deg) translateZ(var(--h))}
.cube .f3{transform:rotateX(90deg) translateZ(var(--h))}
.cube .f4{transform:rotateX(-90deg) translateZ(var(--h))}
.cube .f i{display:block;border-radius:50%;place-self:center;width:76%;height:76%;background:transparent}
.cube .f i.on{background:radial-gradient(circle at 50% 62%,#3a3128 0 30%,#0d0905 64%);box-shadow:inset 0 1px 1px rgba(0,0,0,.7),0 .5px 0 rgba(255,255,255,.95)}
.cube .f.one i.on{background:radial-gradient(circle at 50% 62%,#e5323a 0 34%,#8c0a12 70%);width:96%;height:96%}
.die.canroll{cursor:pointer}
/* when both dice can be played, either can be picked; the picked one is lifted off the board and ringed in gold */
.die.pick{cursor:pointer}
.die.pick::before{content:'';position:absolute;inset:-20%;border-radius:32%;border:2px solid rgba(244,197,66,.5)}
.die .cube{transition:translate .2s ease-out}
.die.sel .cube{translate:0 calc(var(--d) * -.22)}
.die.sel::before{content:'';position:absolute;inset:-22%;border-radius:32%;border:2.5px solid var(--gold);box-shadow:0 0 12px rgba(244,197,66,.85),inset 0 0 6px rgba(244,197,66,.4)}
.lb-dice:has(.die.sel) .dshadow{translate:calc(var(--d) * .1) calc(var(--d) * .14);opacity:.45;filter:blur(4px)}
@media (prefers-reduced-motion:reduce){.die .cube{transition:none}}
.die.canroll .cube{animation:lbnudge 1.6s ease-in-out infinite}
.die.canroll::before{content:'';position:absolute;inset:-24%;border-radius:30%;border:2.5px solid var(--gold);box-shadow:0 0 12px rgba(244,197,66,.9);animation:lbpulse 1.1s ease-in-out infinite}
@keyframes lbpulse{50%{transform:scale(1.12);opacity:.55}}
@keyframes lbnudge{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.die.canroll .cube,.die.canroll::before{animation:none}}
.die:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
/* Nigerian rules, one seed out: the whole throw is one count. Both dice lift and pulse as one, and an ivory tab between them reads "= 9" */
.die.join::before{animation:lbpulse 1.1s ease-in-out infinite}
/* a plain block (not a flex box: WebKit lays out flex and gap on a <button> its own way) holding one unbreakable line; px first, for browsers without container units */
.lb-sum{position:absolute;z-index:6;left:calc(var(--sx,7.5) * 6.6667%);top:calc(var(--sy,8.5) * 6.6667%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  display:block;box-sizing:border-box;width:auto;width:-webkit-max-content;width:max-content;min-width:36px;min-width:9.6cqw;height:19px;height:5cqw;min-height:0;margin:0;padding:0 7px;padding:0 1.6cqw;
  border:0;border-radius:999px;overflow:visible;cursor:default;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  font-family:var(--display);font-size:14px;font-size:3.9cqw;font-weight:400;line-height:19px;line-height:5cqw;text-align:center;white-space:nowrap;color:#2a1608;pointer-events:none;
  background:radial-gradient(120% 140% at 30% 18%,#fffef8,#f6eed8 55%,#e2d3aa);box-shadow:inset 0 -1px 2px rgba(110,80,30,.35),0 0 0 1.5px rgba(244,197,66,.55),1px 2px 2px rgba(22,8,0,.55)}
.lb-sum[hidden]{display:none}
.lb-sum-in{display:inline-block;vertical-align:top;white-space:nowrap;height:100%;line-height:inherit}
.lb-sum i{display:inline;font-style:normal;color:#8a6a3c;font-size:.8em;margin-right:.3em}
.lb-sum b{display:inline;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lb-sum.pick{pointer-events:auto;cursor:pointer}
.lb-sum.pick::after{content:'';position:absolute;inset:-40% -20%}
.lb-sum.sel{box-shadow:inset 0 -1px 2px rgba(110,80,30,.35),0 0 0 2.5px var(--gold),0 0 12px rgba(244,197,66,.85),1px 2px 2px rgba(22,8,0,.55);animation:lbsum 1.1s ease-in-out infinite}
@keyframes lbsum{50%{-webkit-transform:translate(-50%,-50%) scale(1.08);transform:translate(-50%,-50%) scale(1.08)}}
.lb-sum:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.die.join::before,.lb-sum.sel{animation:none}}
.lb-roll{flex:none;min-height:50px;padding-inline:18px;font-size:15px}
.lb.lb-mine .lb-status{color:var(--gold)}

.lb .top .tally{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center;white-space:normal;flex:1 1 150px;min-width:0;justify-content:flex-end;margin-left:0}
@media (max-width:519px){.lb .top .tally{order:3;flex-basis:100%;justify-content:flex-start}.lb .top .brand{display:none}.lb .top .tools{margin-left:auto}}
#lb-games{padding-inline:10px;white-space:nowrap}
.lb[data-players="4"] .lb-strips,.lb[data-players="3"] .lb-strips{gap:5px}

/* landscape phones: board on the left, players, dice and status on the right */
@media (orientation:landscape) and (max-height:520px){
  .lb.app{--bs:min(100dvh - 86px,100vw - 340px);display:flex;flex-direction:column;gap:6px;max-width:none}
  .lb-main{grid-template-columns:var(--bs) minmax(200px,1fr);grid-template-areas:"stage strips" "stage dock";grid-template-rows:auto 1fr;column-gap:16px;justify-items:stretch;align-content:center;justify-content:center}
  .lb-strips{grid-template-columns:1fr;align-self:end}
  .lb-dock{align-self:start}
}

/* the picker, the end sheet and the dashboard tiles */
.rs-pawn{width:36px;height:36px;flex:none;display:block}
.lb-rblurb{margin-top:8px;font-size:14px;line-height:1.4;color:var(--mute)}
.lb-rank{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;text-align:left}
.lb-rank li{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.lb-rank li.first{border-color:var(--gold);background:rgba(244,197,66,.12)}
.lb-rank .rk{width:18px;font:400 15px/1 var(--display)}
.lb-rank .lav{width:28px;height:28px;flex:none;display:block}.lb-rank .lav.duo{width:38px}
.lb-rank .nm{flex:1;min-width:0;font-weight:700;display:flex;flex-direction:column;line-height:1.15}
.lb-rank .nm small{font-weight:400;color:var(--mute);font-size:12px}
.lb-rank .sc{font-size:13px;color:var(--mute);white-space:nowrap}
.avatar.cbav .bigpawn{display:block;width:var(--h);height:var(--h)}
.art-ayo{display:grid;grid-template-columns:repeat(3,20px);grid-template-rows:repeat(2,20px);gap:5px;padding:6px;border-radius:12px;background:linear-gradient(145deg,#94612f,#5b3317);box-shadow:inset 0 2px 0 rgba(255,225,170,.35),0 2px 6px rgba(0,0,0,.4)}
.art-ayo i{display:block;border-radius:50%;background:radial-gradient(circle at 50% 70%,#1d0e04,#3b2210);box-shadow:inset 0 2px 3px rgba(0,0,0,.7)}
.art-ayo i:nth-child(2),.art-ayo i:nth-child(5){background:radial-gradient(circle at 36% 38%,#f6d98a 0 14%,transparent 15%),radial-gradient(circle at 64% 60%,#e7b84d 0 14%,transparent 15%),radial-gradient(circle at 50% 70%,#1d0e04,#3b2210)}

/* call-outs: the Whot/Pool danfo plate (table.css, .pbco in pool.css), with Ludo pictures: dice, seeds, the home square */
.lbco .co-icon{overflow:visible}
.lbco .co-sub{max-width:19em}
.callout.lbco.lbco-tall .co-plate{padding-top:1.5em}
.lbco .co-icon>svg{position:absolute;inset:0}
.lbco-seed{position:absolute;display:block;width:62%;height:62%;left:19%;top:16%;filter:drop-shadow(0 .12em .12em rgba(0,0,0,.55))}
.lbco-die{animation:co-pop .45s .28s cubic-bezier(.2,.8,.3,1.4) both}
.lbco-rays{animation:co-lamp .42s .5s ease-in-out 3 alternate both}
/* sent home: the caught seed hops up and back, an arrow curling back to the yard over it */
.co-capture .lbco-seed{width:80%;height:80%;left:-6%;top:22%}
.co-capture .co-icon>svg.lbco-back{inset:-24% -26% auto auto;width:82%;height:82%;z-index:1;animation:co-pop .4s .38s cubic-bezier(.2,.8,.3,1.4) both}
.lbco-hop{animation:lbco-hop .7s .3s cubic-bezier(.3,.6,.3,1) both}
@keyframes lbco-hop{0%{transform:translate(70%,-30%) rotate(0)}45%{transform:translate(30%,-70%) rotate(-25deg)}100%{transform:none}}
/* home: the seed drops onto the middle of the board */
.co-home .lbco-seed{width:46%;height:46%;left:27%;top:24%}
.lbco-land{animation:lbco-land .5s .3s cubic-bezier(.3,.7,.4,1.5) both}
@keyframes lbco-land{0%{transform:translateY(-90%) scale(1.3);opacity:0}60%{opacity:1}100%{transform:none}}
/* seed out: up out of its socket */
.co-out .lbco-seed{top:6%}
.lbco-rise{animation:lbco-rise .5s .3s cubic-bezier(.2,.8,.3,1.4) both}
@keyframes lbco-rise{0%{transform:translateY(55%) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.lbco-flip{animation:co-pop .35s cubic-bezier(.2,.8,.3,1.4) both;transform-origin:0 50%}
/* per-event treatments, borrowed from Whot: the big hits slam down with the red glow, home brakes in with a gold one */
.co-capture .co-plate,.co-three .co-plate{box-shadow:0 0 0 .14em #ff4a2e,0 0 0 .26em #0b0b0b,0 0 1.6em .2em rgba(255,74,46,.45),0 .7em 1.4em rgba(0,0,0,.55);animation-name:co-slam}
.co-capture .co-title,.co-three .co-title{color:#ffd9cf;text-shadow:0 .06em 0 #8c1a0a,0 0 .5em rgba(255,90,60,.7)}
.co-home .co-plate{box-shadow:0 0 0 .14em var(--danfo),0 0 0 .26em #0b0b0b,0 0 1.6em .2em rgba(255,198,26,.45),0 .7em 1.4em rgba(0,0,0,.55);animation-name:co-brake}
.co-out .co-plate{animation-name:co-brake}
.co-nomove .co-title{color:#e9e2cf;text-shadow:0 .06em 0 #4a4436,0 .1em .2em rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.lbco-seed,.lbco-die,.lbco-rays,.lbco-back,.lbco-flip{animation:none!important}}
/* a table played for money: the stake and the prize, quiet gold text beside the rule set */
.lb .top .tally .lb-stake{color:var(--gold);font-size:12.5px;white-space:nowrap}
.endsheet .lb-stakeline{margin:4px 0 0;text-align:center;font-size:13.5px;font-weight:600}
.endsheet .lb-stakeline.win{color:#8be2b2}
.endsheet .lb-stakeline.loss{color:#f1a39b}