/* Ludo: its home (a little board, the rules to choose) and its table — a printed board in a wooden frame (the admin's
   look: .ldb-*), turned pawns, an ivory die that is thrown from the base of whoever rolls, the players above (what each
   one is doing, their last roll), the dock below. Phones: held upright, the board as wide as the screen. Shares the dock
   and the side panel of t21.css. */

/* ---------- the colours of the four sides, the sheet, the frame (the admin's choice of look) ---------- */
.ld-layout, .ld-mini-box, .ld-art-die {
  --c0: #c62d3a; --c1: #17875a; --c2: #e3a21a; --c3: #2461c6;
  --bd: #efe5cc; --cell: #f8f1df; --line: #b9a57c; --bin: #fbf6e9; --star: #a8843f; --edge: #6d4b28;
  --fr1: #6e4121; --fr2: #472711; --fr3: #5f3517; --frl: rgba(0,0,0,.5); }
.ldb-night { --bd: #1a1e27; --cell: #232935; --line: #3b4458; --bin: #141821; --star: #c9a55a; --edge: #b8954c;
  --c0: #e04a5c; --c1: #2dbd7a; --c2: #f0bb38; --c3: #4a8cf0; --fr1: #2c2f38; --fr2: #14161c; --fr3: #23262e; --frl: rgba(201,165,90,.55); }
.ldb-wood { --bd: #d7ad72; --cell: #e8c894; --line: #9d7240; --bin: #efd8ae; --star: #6e4a22; --edge: #3f240e;
  --c0: #a8302a; --c1: #3c7a3a; --c2: #cf9322; --c3: #2d5d97; --fr1: #5a2e17; --fr2: #34170a; --fr3: #4a2311; }
.ldb-candy { --bd: #eeeae4; --cell: #faf8f4; --line: #cfc6b8; --bin: #ffffff; --star: #bba27a; --edge: #9d917f;
  --c0: #dd5a6a; --c1: #36a877; --c2: #e8b048; --c3: #5486d8; --fr1: #dcd7cf; --fr2: #b5ada0; --fr3: #cbc4b9; --frl: rgba(0,0,0,.25); }

/* the sheet (svg): printed squares with thin lines, the corners, the wells, the stars, the arrows at the starts */
.lf0 { fill: var(--c0); } .lf1 { fill: var(--c1); } .lf2 { fill: var(--c2); } .lf3 { fill: var(--c3); }
.ld-bg { fill: var(--bd); }
.ld-cell { fill: var(--cell); stroke: var(--line); stroke-width: .035; }
.ld-cell.lf0 { fill: var(--c0); } .ld-cell.lf1 { fill: var(--c1); } .ld-cell.lf2 { fill: var(--c2); } .ld-cell.lf3 { fill: var(--c3); }
.ld-cell.lf0, .ld-cell.lf1, .ld-cell.lf2, .ld-cell.lf3 { stroke: rgba(0,0,0,.25); }
.ld-bin { fill: var(--bin); stroke: rgba(0,0,0,.3); stroke-width: .05; }
.ld-spot { opacity: .2; }
.ld-wring { fill: none; stroke-width: .07; }
.ld-wring.lc0 { stroke: var(--c0); } .ld-wring.lc1 { stroke: var(--c1); } .ld-wring.lc2 { stroke: var(--c2); } .ld-wring.lc3 { stroke: var(--c3); }
.ld-star { fill: var(--star); fill-opacity: .2; stroke: var(--star); stroke-width: .05; stroke-linejoin: round; }
.ld-gold { stroke: #7a5718; stroke-width: .03; stroke-linejoin: round; }
.ld-arrow { fill: rgba(255,255,255,.92); }
.ld-lines { fill: none; stroke: rgba(0,0,0,.24); stroke-width: .035; }
.ld-hub { fill: var(--bd); stroke: rgba(0,0,0,.3); stroke-width: .05; }
.ld-edge { fill: none; stroke: var(--edge); stroke-width: .08; }

/* ---------- home ---------- */
.logo-ld { display: inline-block; width: 36px; height: 36px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.logo-ld svg { width: 100%; height: 100%; display: block; }
.ld-art { position: relative; height: 176px; margin: -6px 0 6px; }
.ld-mini-box { position: absolute; left: 50%; top: 12px; width: 150px; height: 150px; border-radius: 2px;
  transform: translateX(-60%) perspective(600px) rotateX(18deg) rotate(-6deg);
  box-shadow: 0 0 0 6px var(--fr2), 0 0 0 7px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.3), 0 20px 28px -8px rgba(0,0,0,.75); }
.ld-mini-box svg { width: 100%; height: 100%; display: block; border-radius: 2px; }
.ld-mini-box .ld-pc { width: 6.6%; }
.ld-pc.art .ld-pawn { animation: ldDrop .6s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay: calc(var(--d) + .2s); }
@keyframes ldDrop { from { transform: translateY(-120%); opacity: 0; } }
.ld-art-die { position: absolute; left: calc(50% + 66px); top: 34px; width: 50px; height: 50px; animation: ldArtHop 5s ease-in-out infinite; }
.ld-art-die .ld-cube { animation: ldArtCube 5s cubic-bezier(.3,.7,.3,1) infinite; }
@keyframes ldArtHop { 0%, 55%, 100% { transform: none; } 68% { transform: translate(-10px, -20px); } 82% { transform: translateY(2px); } }
@keyframes ldArtCube { 0%, 55% { transform: rotateX(-20deg) rotateY(-24deg) rotateX(0deg) rotateY(180deg); }
  85%, 100% { transform: rotateX(-20deg) rotateY(-24deg) rotateX(360deg) rotateY(540deg); } }
.ld-rules .inline { margin-top: 8px; }
.ld-rules .inline:first-of-type { margin-top: 0; }
#ldTeamsRow.hidden { display: none; }
/* four players in teams: your partner and the others marked on the seats; a tap on a seat's button makes it your partner */
.seat-wrap.ld-mate .seat-row { box-shadow: inset 3px 0 0 #7fe25a; }
.seat-wrap.ld-foe .seat-row { box-shadow: inset 3px 0 0 #ff7a8a; }
.ld-team { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font: 900 10px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .4px;
  text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.ld-team.mate { background: rgba(127,226,90,.2); color: #b5f58f; border-color: rgba(127,226,90,.55); }
.ld-team.foe { background: rgba(255,122,138,.12); color: #ffb3bd; border-color: rgba(255,122,138,.3); }
.ld-team.foe:hover { background: rgba(127,226,90,.14); color: #d8ffc4; border-color: rgba(127,226,90,.45); }
@media (max-width: 520px) { .ld-mini-box { width: 128px; height: 128px; } .ld-art { height: 156px; } .ld-art-die { left: calc(50% + 52px); width: 44px; height: 44px; } }

/* ---------- the table ---------- */
.ld-layout .t21-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* the players: a card each, in its colour; what they are doing now and their last roll */
.ld-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ld-pl { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px 8px 8px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(10,12,28,.72); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 22px -16px rgba(0,0,0,.9); transition: border-color .25s, box-shadow .25s, background .25s; }
.ld-pl::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; border-radius: 2px; background: var(--pc); opacity: .75; }
.ld-pl.turn { border-color: color-mix(in srgb, var(--pc) 65%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 24%, transparent), rgba(255,255,255,.02)), rgba(10,12,28,.84);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 35%, transparent), 0 14px 30px -14px var(--pc); }
.ld-pl.turn::before { opacity: 1; box-shadow: 0 0 10px var(--pc); }
.ld-pl.gone { opacity: .4; }
.ld-av { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; padding: 3px; box-sizing: border-box; }
.ld-ring { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--pc) 40%, rgba(255,255,255,.08)); }
.ld-pl.turn .ld-ring { background: conic-gradient(var(--pc) calc(var(--k, 1) * 360deg), rgba(255,255,255,.12) 0); }
.ld-avi { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 900;
  font-size: 14px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 70%, #000));
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35); }
.ld-avi svg.i { width: 18px; height: 18px; } .ld-avi .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-pn { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ld-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ld-nm b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e6e9ff; }
.ld-pl.me .ld-nm b { color: #fff; }
.ld-nm em { flex: none; font-style: normal; font-size: 9.5px; font-weight: 800; color: #b5f58f; text-transform: uppercase; letter-spacing: .4px; }
.ld-st { min-height: 13px; font-size: 11px; font-weight: 700; color: rgba(223,228,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-pl.turn .ld-st { color: #fff; }
.ld-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ld-md { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 22px; height: 22px; padding: 3px; box-sizing: border-box; border-radius: 5px;
  background: linear-gradient(145deg, #fffdf6, #e0d6c0); box-shadow: 0 0 0 1.5px var(--pc), 0 3px 6px -2px rgba(0,0,0,.6); transition: opacity .25s; }
.ld-md i { place-self: center; width: 4px; height: 4px; border-radius: 50%; }
.ld-md i.on { background: #18171d; }
.ld-pl:not(.turn) .ld-md { opacity: .55; }
.ld-pl .ld-md.off { opacity: .16; }
.ld-md.spin { animation: ldMdSpin .4s linear infinite; }
@keyframes ldMdSpin { to { transform: rotate(360deg); } }
.ld-home-n { display: inline-flex; gap: 3px; font-style: normal; }
.ld-home-n i { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 5px var(--pc); }
.ld-home-n i.off { background: rgba(255,255,255,.12); box-shadow: none; }

/* the board: as big as the place allows (a square), in its wooden frame */
.ld-boardbox { position: relative; width: min(100%, calc(100dvh - var(--top, 64px) - 226px)); min-width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto;
  box-sizing: border-box; border-radius: 16px; padding: 12px;
  /* the wood: long grain (stretched noise), fine streaks, the colour of the wood */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .3' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.3 -.45'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 320px 320px,
    repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px), repeating-linear-gradient(88deg, rgba(0,0,0,.07) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, var(--fr1), var(--fr2) 55%, var(--fr3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(0,0,0,.45), inset 0 -3px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.35), 0 30px 60px -26px rgba(0,0,0,.95); }
.ld-board { position: relative; width: 100%; height: 100%; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--frl), 0 2px 0 rgba(255,255,255,.1), 0 3px 10px rgba(0,0,0,.45); }
.ld-rot { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.3,.8,.3,1); }
.ld-rot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 3px; }
.ld-layer { position: absolute; inset: 0; }

/* a piece: a turned pawn standing on its square (it stays upright however the board is turned) */
.ld-pc { position: absolute; display: block; width: 5.6%; aspect-ratio: 1; transform: translate(-50%, -50%); font-style: normal; pointer-events: none;
  --pc: var(--c0); transition: left var(--hop, .15s) cubic-bezier(.35,.1,.35,1), top var(--hop, .15s) cubic-bezier(.35,.1,.35,1), width .2s; }
/* its shadow on the board (light from the top left): it stays down when the pawn jumps */
/* (the sun high up: a short shadow right under the pawn, just showing round its foot) */
.ld-psh { position: absolute; left: 50%; top: 81%; width: 116%; height: 32%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,.3) 60%, transparent); }
.ld-pc.c0 { --pc: var(--c0); } .ld-pc.c1 { --pc: var(--c1); } .ld-pc.c2 { --pc: var(--c2); } .ld-pc.c3 { --pc: var(--c3); }
.ld-pw { position: absolute; inset: 0; transform: rotate(var(--unrot, 0deg)); pointer-events: none; }
.ld-pawn { position: absolute; left: -18%; top: -79%; width: 136%; height: 168%; overflow: visible; pointer-events: none; transform-origin: 50% 77%; }
.pw-c { fill: var(--pc); stroke: rgba(0,0,0,.45); stroke-width: .5; }
.ld-pc.small { width: 4.3%; }
.ld-pc.home { width: 3.7%; }
/* your pieces that can move: they rise and fall, with a ring at their foot; tap one (or the ring where it lands) */
.ld-pc.can { cursor: pointer; pointer-events: auto; z-index: 60 !important; }
.ld-pc.can .ld-pawn { pointer-events: auto; animation: ldBob 1s ease-in-out infinite; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px var(--pc)); }
.ld-pc.can .ld-pw::before { content: ''; position: absolute; left: 50%; top: 50%; width: 160%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 2px var(--pc), 0 0 12px var(--pc); animation: ldRing 1s ease-in-out infinite; }
@keyframes ldBob { 50% { transform: translateY(-16%); } }
@keyframes ldRing { 50% { transform: translate(-50%, -50%) scale(1.18); opacity: .55; } }
/* walking: a jump on every square (the shadow shrinks while it is in the air); on the last one it lands and settles */
.ld-pc.hop .ld-pawn { animation: ldHop var(--hop, .15s) ease-out; }
.ld-pc.hop .ld-psh { animation: ldHopSh var(--hop, .15s) ease-out; }
@keyframes ldHop { 45% { transform: translateY(-42%) scale(1.05); } 100% { transform: none; } }
@keyframes ldHopSh { 45% { transform: translate(-50%, -50%) scale(.62); opacity: .5; } }
.ld-pc.land .ld-pawn { animation: ldLand calc(var(--hop, .15s) * 2.2) ease-out; }
.ld-pc.land .ld-psh { animation: ldHopSh var(--hop, .15s) ease-out; }
@keyframes ldLand { 20% { transform: translateY(-42%) scale(1.05); } 45% { transform: translateY(0) scale(1.1, .86); } 70% { transform: translateY(-6%) scale(.97, 1.04); }
  100% { transform: none; } }
/* caught: knocked into the air, spinning, and back to its base */
.ld-pc.fly { transition: left .75s cubic-bezier(.3,.55,.3,1), top .75s cubic-bezier(.3,.55,.3,1) !important; z-index: 85 !important; }
.ld-pc.fly .ld-pawn { animation: ldFly .75s ease-in-out; }
.ld-pc.fly .ld-psh { animation: ldFlySh .75s ease-in-out; }
@keyframes ldFly { 45% { transform: translateY(-150%) rotate(200deg) scale(1.3); } 85% { transform: translateY(0) rotate(360deg) scale(1, .88); } 100% { transform: rotate(360deg); } }
@keyframes ldFlySh { 45% { transform: translate(-50%, -50%) scale(.4); opacity: .3; } }
/* a capture: a ring and chips flying out; a piece home: a glow in its colour */
.ld-poof, .ld-flash { position: absolute; z-index: 84; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; --pc: #fff; }
.ld-poof.c0, .ld-flash.c0 { --pc: var(--c0); } .ld-poof.c1, .ld-flash.c1 { --pc: var(--c1); } .ld-poof.c2, .ld-flash.c2 { --pc: var(--c2); } .ld-poof.c3, .ld-flash.c3 { --pc: var(--c3); }
.ld-poof::before, .ld-flash::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--pc); box-shadow: 0 0 12px var(--pc);
  animation: ldRingOut .6s ease-out forwards; }
.ld-flash { width: 16%; }
.ld-flash::before { border: 0; background: radial-gradient(closest-side, #fff, var(--pc) 45%, transparent); animation: ldGlow .9s ease-out forwards; }
.ld-poof b, .ld-flash b { position: absolute; left: 50%; top: 50%; width: 14%; height: 14%; margin: -7% 0 0 -7%; border-radius: 50%; background: var(--pc);
  box-shadow: 0 0 4px var(--pc); animation: ldChip .7s cubic-bezier(.2,.7,.3,1) forwards; }
.ld-flash b { background: #fff; box-shadow: 0 0 6px var(--pc), 0 0 2px #fff; }
.ld-poof b:nth-child(1), .ld-flash b:nth-child(1) { --a: 0deg; } .ld-poof b:nth-child(2), .ld-flash b:nth-child(2) { --a: 45deg; }
.ld-poof b:nth-child(3), .ld-flash b:nth-child(3) { --a: 90deg; } .ld-poof b:nth-child(4), .ld-flash b:nth-child(4) { --a: 135deg; }
.ld-poof b:nth-child(5), .ld-flash b:nth-child(5) { --a: 180deg; } .ld-poof b:nth-child(6), .ld-flash b:nth-child(6) { --a: 225deg; }
.ld-poof b:nth-child(7), .ld-flash b:nth-child(7) { --a: 270deg; } .ld-poof b:nth-child(8), .ld-flash b:nth-child(8) { --a: 315deg; }
@keyframes ldRingOut { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes ldGlow { 0% { transform: scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ldChip { from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateY(-420%) scale(.4); opacity: 0; } }
/* whose turn: their corner and their starting square light up (yours brighter) */
.ld-light { position: absolute; z-index: 3; width: 40%; height: 40%; pointer-events: none; opacity: 0; transition: opacity .35s; --pc: #fff; }
.ld-light.c0 { --pc: var(--c0); } .ld-light.c1 { --pc: var(--c1); } .ld-light.c2 { --pc: var(--c2); } .ld-light.c3 { --pc: var(--c3); }
.ld-light.on { opacity: .75; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 22px color-mix(in srgb, var(--pc) 70%, #fff); animation: ldLight 1.8s ease-in-out infinite; }
.ld-light.mine { opacity: 1; box-shadow: inset 0 0 0 3px #fff, inset 0 0 30px #fff, 0 0 22px var(--pc); }
.ld-light b { position: absolute; width: 16.667%; height: 16.667%; box-shadow: inset 0 0 0 2px #fff, 0 0 12px var(--pc), 0 0 4px #fff; }
@keyframes ldLight { 50% { opacity: .45; } }
.ld-light.mine { animation-name: ldLightMine; }
@keyframes ldLightMine { 50% { opacity: .7; } }
/* where a piece that can move would land (tap it to move there) */
.ld-dest { position: absolute; z-index: 58; width: 4.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer;
  border: 2px solid var(--pc, #fff); background: radial-gradient(circle, color-mix(in srgb, var(--pc, #fff) 55%, transparent) 0 28%, rgba(255,255,255,.35) 30%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.75), 0 0 10px var(--pc, #fff); animation: ldDest 1.2s ease-in-out infinite; }
.ld-dest::after { content: ''; position: absolute; inset: -60%; border-radius: 50%; }
.ld-dest.c0 { --pc: var(--c0); } .ld-dest.c1 { --pc: var(--c1); } .ld-dest.c2 { --pc: var(--c2); } .ld-dest.c3 { --pc: var(--c3); }
@keyframes ldDest { 50% { transform: translate(-50%, -50%) scale(1.2); opacity: .7; } }

/* the die: an ivory cube (3D), in the middle of the board; thrown from the base of whoever rolls; tap it on your turn */
.ld-d3 { container-type: size; perspective: 420px; }
/* (a little above the middle: the pieces at home sit in a row along the edges round it, never under it) */
.ld-die { position: absolute; left: 50%; top: 48%; z-index: 70; width: 10.5%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0;
  background: none; cursor: default; --dc: var(--c0); container-type: size; perspective: 420px; }
.ld-dsh { position: absolute; left: 4%; right: 4%; bottom: -16%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  transition: background .3s; }
.ld-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-9deg) rotateY(-11deg); }
/* at rest only the number on top shows its pips (the thin sides stay plain ivory): no doubt what was rolled */
.ld-die:not(.throw) .ld-f i.on { visibility: hidden; }
.ld-die[data-f="1"]:not(.throw) .f1 i.on, .ld-die[data-f="2"]:not(.throw) .f2 i.on, .ld-die[data-f="3"]:not(.throw) .f3 i.on,
.ld-die[data-f="4"]:not(.throw) .f4 i.on, .ld-die[data-f="5"]:not(.throw) .f5 i.on, .ld-die[data-f="6"]:not(.throw) .f6 i.on { visibility: visible; }
/* each face: ivory, lit from the top left, its edges rounded off (lighter at the top left, darker at the bottom right) */
.ld-f { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%; box-sizing: border-box; border-radius: 17%;
  background: radial-gradient(120% 120% at 30% 24%, #fffffb 0%, #f6f0e2 45%, #e6dcc6 80%, #d3c6a8 100%);
  box-shadow: inset 0 0 0 1px rgba(140,115,75,.28), inset 2.2cqw 2.2cqw 3cqw rgba(255,255,255,.85), inset -2.6cqw -2.6cqw 4.5cqw rgba(115,90,50,.3);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ld-core { position: absolute; inset: 4%; background: #e8dec8; border-radius: 6%; }
.ld-core.cy { transform: rotateY(90deg); } .ld-core.cx { transform: rotateX(90deg); }
/* the pips: drilled in and painted (a dark hollow, a light rim below), the 1 in red */
.ld-f i { place-self: center; width: 66%; aspect-ratio: 1; border-radius: 50%; }
.ld-f i.on { background: radial-gradient(circle at 42% 38%, #45434e, #121117 62%, #050507);
  box-shadow: inset 0 1cqw 1.2cqw rgba(0,0,0,.85), 0 .7cqw 0 rgba(255,255,255,.8), 0 -.4cqw .6cqw rgba(110,85,45,.25); }
.ld-f.f1 { transform: translateZ(50cqw); }
.ld-f.f6 { transform: rotateY(180deg) translateZ(50cqw); }
.ld-f.f3 { transform: rotateY(90deg) translateZ(50cqw); }
.ld-f.f4 { transform: rotateY(-90deg) translateZ(50cqw); }
.ld-f.f2 { transform: rotateX(90deg) translateZ(50cqw); }
.ld-f.f5 { transform: rotateX(-90deg) translateZ(50cqw); }
/* thrown across the board from the corner of whoever rolls: it hits the board three times, each bounce lower (bigger =
   in the air, nearer to you; its shadow falls behind it then), and stops in the middle */
.ld-die.throw { animation: ldThrow .85s linear; }
.ld-die.throw .ld-dsh { animation: ldThrowSh .85s linear; animation-duration: inherit; }
@keyframes ldThrow {
  0% { translate: var(--fx, 0) var(--fy, 0); scale: .8; opacity: .2; animation-timing-function: ease-out; }
  22% { translate: calc(var(--fx, 0) * .6) calc(var(--fy, 0) * .6); scale: 1.32; opacity: 1; animation-timing-function: ease-in; }
  40% { translate: calc(var(--fx, 0) * .32) calc(var(--fy, 0) * .32); scale: 1; animation-timing-function: ease-out; }
  54% { translate: calc(var(--fx, 0) * .16) calc(var(--fy, 0) * .16); scale: 1.14; animation-timing-function: ease-in; }
  68% { translate: calc(var(--fx, 0) * .06) calc(var(--fy, 0) * .06); scale: 1; animation-timing-function: ease-out; }
  78% { translate: calc(var(--fx, 0) * .02) calc(var(--fy, 0) * .02); scale: 1.04; animation-timing-function: ease-in; }
  88%, 100% { translate: 0 0; scale: 1; } }
@keyframes ldThrowSh { 0% { transform: translate(40%, 50%) scale(.6); opacity: .2; } 22% { transform: translate(34%, 70%) scale(.55); opacity: .35; }
  40% { transform: none; opacity: 1; } 54% { transform: translate(14%, 30%) scale(.8); opacity: .6; } 68% { transform: none; opacity: 1; }
  78% { transform: translate(4%, 10%) scale(.93); } 88%, 100% { transform: none; opacity: 1; } }
.ld-die.can { cursor: pointer; animation: ldDieCan 1.3s ease-in-out infinite; }
.ld-die.can::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dc) 60%, #fff);
  box-shadow: 0 0 18px var(--dc), inset 0 0 12px color-mix(in srgb, var(--dc) 50%, transparent); animation: ldRing 1.3s ease-in-out infinite; }
.ld-die.can .ld-dsh { background: radial-gradient(closest-side, color-mix(in srgb, var(--dc) 80%, transparent), transparent); }
@keyframes ldDieCan { 50% { translate: 0 -8%; } }
.ld-die.six::after { content: ''; position: absolute; inset: -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,216,102,.7), transparent); animation: ldSix .7s ease-out forwards; }
@keyframes ldSix { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
/* under the die: "Roll" on your turn; otherwise whose die it is, in their colour */
.ld-roll-t { position: absolute; left: 50%; top: calc(100% + 18%); transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ld-roll-t.hide { display: none; }
.ld-roll-t.go { font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #2a1800; background: linear-gradient(#ffe38a, #e5b13a);
  box-shadow: 0 3px 0 #8a6412, 0 6px 14px -4px rgba(0,0,0,.6); }
.ld-roll-t.who { color: #fff; background: color-mix(in srgb, var(--dc) 85%, #000); box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 4px 10px -3px rgba(0,0,0,.6); }
.ld-banner { z-index: 75; top: 30%; }
.ld-board .paused21 { border-radius: 3px; z-index: 88; }

/* the end: who won, the places, the chips */
.ld-end { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; padding: 6%; border-radius: 3px; background: rgba(6,8,20,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ld-end.hidden { display: none; }
.le-box { width: min(380px, 100%); max-height: 100%; overflow: auto; padding: 22px 16px 14px; border-radius: 20px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,207,77,.22), transparent 70%), linear-gradient(170deg, rgba(30,28,70,.97), rgba(12,12,32,.97));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -20px rgba(0,0,0,.95); animation: ldBox .45s cubic-bezier(.3,1.3,.5,1); }
@keyframes ldBox { from { transform: scale(.9) translateY(12px); opacity: 0; } }
.le-crown svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 10px rgba(255,207,77,.6)); }
.le-box h3 { margin: 4px 0 12px; font-size: 20px; font-weight: 900; background: linear-gradient(180deg, #fff, #ffe9a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.le-rows { display: grid; gap: 6px; }
.le-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 3px 0 0 var(--pc);
  text-align: left; animation: ldRow .4s cubic-bezier(.3,1.2,.5,1) backwards; animation-delay: calc(var(--i) * 100ms + .2s); }
@keyframes ldRow { from { transform: translateX(-12px); opacity: 0; } }
.le-row.me { background: rgba(124,92,255,.14); }
.le-row.win { background: rgba(255,216,102,.1); }
.le-pl { width: 22px; text-align: center; font-size: 16px; font-weight: 900; color: #ffd866; }
.le-av { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--pc);
  color: #fff; font-size: 12px; font-weight: 900; }
.le-av svg.i { width: 16px; height: 16px; } .le-av .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.le-n { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-n small { font-size: 10.5px; color: rgba(223,228,255,.6); font-weight: 700; }
.le-row em { font-style: normal; font-size: 15px; font-weight: 900; color: #a6f56b; font-variant-numeric: tabular-nums; }
.le-row em.neg { color: #ff8b95; }

/* the dock under the board */
.ld-dock { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.ld-dock .turnlbl { align-items: center; }
.pause-mini { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #dfe4ff; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.pause-mini svg.i { width: 14px; height: 14px; }
.pause-mini.hidden { display: none; }

/* the tips of the first games (the same bubble as in biriba) */
.br-tip { position: absolute; z-index: 80; width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 10px 12px 9px; border-radius: 14px;
  color: #1c1830; background: linear-gradient(170deg, #fffbe9, #ffeeb8); box-shadow: 0 14px 30px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(160,120,20,.35);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .3s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.br-tip.below { transform: translateY(-6px) scale(.96); }
.br-tip.on { opacity: 1; transform: none; pointer-events: auto; }
.bt-t { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.bt-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.bt-acts button { border: 0; background: none; cursor: pointer; font: 800 11.5px 'Inter', system-ui, sans-serif; padding: 3px 0; }
.bt-ok { padding: 4px 12px !important; border-radius: 999px; color: #fff; background: linear-gradient(#ffe58f, #e3a61f) !important; box-shadow: 0 2px 0 #8a5a0a; }
.bt-off { color: #7a6a3a; text-decoration: underline; text-underline-offset: 2px; }
.bt-arrow { position: absolute; left: var(--ax, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #ffeeb8;
  box-shadow: 1px 1px 0 rgba(160,120,20,.35); }
.br-tip.below .bt-arrow { top: -6px; bottom: auto; background: #fffbe9; box-shadow: -1px -1px 0 rgba(160,120,20,.35); }
.br-tag { display: inline-block; margin: 2px 0 2px 4px; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; }
.br-tag.on { background: rgba(127,226,90,.16); color: #b5f58f; }
.br-tag.off { background: rgba(255,255,255,.06); color: var(--muted); text-decoration: line-through; }

/* computers: a little less around the board (the page's margins, the players' cards, the dock), so the board is bigger
   and everything still fits the screen without scrolling */
@media (min-width: 621px) {
  .page#table:has(.ld-layout) { padding-top: 12px; padding-bottom: 12px; }
  .ld-pl { padding-top: 6px; padding-bottom: 6px; }
  .ld-dock { padding: 9px 14px; }
  .ld-dock .tbar { height: 10px; }
}

/* phones, held upright: the board as wide as the screen, the players two by two above it */
@media (max-width: 620px) {
  .page#table:has(.ld-layout) { padding: 8px 6px 20px; }
  .ld-players { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ld-pl { padding: 6px 8px 6px 6px; gap: 7px; border-radius: 12px; }
  .ld-av { width: 32px; height: 32px; }
  .ld-nm b { font-size: 12px; }
  .ld-st { font-size: 10.5px; }
  .ld-md { width: 19px; height: 19px; padding: 2.5px; } .ld-md i { width: 3.5px; height: 3.5px; }
  .ld-boardbox { width: 100%; min-width: 0; padding: 7px; border-radius: 12px; }
  .ld-pc { width: 6%; } .ld-pc.small { width: 4.6%; } .ld-pc.home { width: 3.8%; }
  .ld-die { width: 12.5%; }
  .ld-roll-t { font-size: 9.5px; padding: 1px 7px; }
  .ld-dock { padding: 10px 12px 12px; }
  .bt-t { font-size: 11.5px; } .br-tip { padding: 8px 10px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-pc.can .ld-pawn, .ld-pc.can .ld-pw::before, .ld-die.can, .ld-die.can::before, .ld-dest, .ld-art-die, .ld-art-die .ld-cube, .ld-md.spin,
  .ld-pc.hop .ld-pawn, .ld-pc.hop .ld-psh, .ld-pc.land .ld-pawn, .ld-pc.land .ld-psh, .ld-pc.fly .ld-pawn, .ld-pc.fly .ld-psh, .ld-light.on,
  .ld-die.throw, .ld-die.throw .ld-dsh { animation: none; }
  .ld-poof, .ld-flash { display: none; }
}

/* ---------- full screen: the whole table on one screen, nothing scrolls ---------- */
.ld-tools { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; }
.ld-tools .pause-mini { margin-left: 0; }
.ld-tools .fs-mini { padding: 0 7px; }
body.game-fs .ld-layout { height: 100%; align-items: stretch; }
body.game-fs .ld-layout .t21-main { min-height: 0; height: 100%; }
/* (the board as big as the screen leaves it: the screen less the players' cards, the dock and the margins) */
body.game-fs .ld-layout .ld-boardbox { width: min(100%, calc(100dvh - 176px)); min-width: 0; }
body.game-fs .ld-layout > .t21-side { position: static; height: 100%; min-height: 0; overflow: hidden; }
body.game-fs .ld-layout > .t21-side > .panel21 { flex: none; }
body.game-fs .ld-layout > .t21-side > .panel21:has(.log21) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.game-fs .ld-layout > .t21-side .log21 { flex: 1 1 auto; min-height: 0; max-height: none; }
body.game-fs .ld-layout > .t21-side > .btn { flex: none; }
@media (max-width: 1100px) {
  body.game-fs .ld-layout > .t21-side { display: none; }
}
@media (max-width: 620px) {
  body.game-fs .ld-layout .ld-boardbox { width: min(100%, calc(100dvh - 210px)); }
  /* (a phone held upright: the table does not fill the screen, so the panels under it stay, as out of full screen, and the page scrolls) */
  body.game-fs[data-page="table"]:has(.ld-layout) { height: auto; min-height: 100dvh; overflow: visible; }
  body.game-fs[data-page="table"] .page#table:has(.ld-layout) { height: auto; overflow: visible; }
  body.game-fs .ld-layout, body.game-fs .ld-layout .t21-main { height: auto; }
  body.game-fs .ld-layout > .t21-side { display: flex; height: auto; overflow: visible; }
  body.game-fs .ld-layout > .t21-side .log21 { flex: none; max-height: 160px; }
}
/* ---------- the die and the pawns (the admin's choice, or each player's own on their screen) ---------- */
.ldd-black .ld-f { background: radial-gradient(120% 120% at 30% 24%, #4a4a54 0%, #26262e 45%, #141418 80%, #0a0a0c 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 2.2cqw 2.2cqw 3cqw rgba(255,255,255,.14), inset -2.6cqw -2.6cqw 4.5cqw rgba(0,0,0,.5); }
.ldd-black .ld-core { background: #1a1a1f; }
.ldd-black .ld-f i.on { background: radial-gradient(circle at 42% 38%, #ffffff, #e6e6ea 62%, #b9b9c2); box-shadow: inset 0 1cqw 1.2cqw rgba(0,0,0,.35), 0 .5cqw 0 rgba(0,0,0,.6); }
.ldd-red .ld-f { background: radial-gradient(120% 120% at 30% 24%, #ff6b6b 0%, #d8262f 45%, #9c0f17 80%, #6e070d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 2.2cqw 2.2cqw 3cqw rgba(255,255,255,.35), inset -2.6cqw -2.6cqw 4.5cqw rgba(60,0,0,.45); }
.ldd-red .ld-core { background: #a5141c; }
.ldd-red .ld-f i.on { background: radial-gradient(circle at 42% 38%, #ffffff, #f2eeee 62%, #cfc4c4); box-shadow: inset 0 1cqw 1.2cqw rgba(0,0,0,.3), 0 .5cqw 0 rgba(90,0,0,.55); }
.ldp-matte .ld-pawn { filter: saturate(.82) brightness(.94) contrast(.92); }
.ldp-metal .ld-pawn { filter: saturate(.7) contrast(1.4) brightness(1.18) drop-shadow(0 0 1px rgba(255,255,255,.35)); }
/* (my look: a die alone, four pawns in a row) */
.lkp-ldd { position: relative; display: block; width: 44px; height: 44px; container-type: size; perspective: 420px; }
.lkp-ldd .ld-cube { transform: rotateX(-24deg) rotateY(-32deg); }
.lkp-ldd .ld-f i.on { visibility: visible; }
.lkp-ldp { position: relative; display: block; width: 104px; height: 40px; }
.lkp-ldp .ld-pc { position: absolute; top: 50%; width: 24px; pointer-events: none; }