.surface .board.bp{position:relative;isolation:isolate;box-sizing:border-box;border:clamp(4px,1cqw,12px) solid #78563b;border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#d8ae78,#bb8957);box-shadow:0 5px 0 #60432f,0 10px 20px #20190e33;color:#26352b}
.bp button{border:0;position:relative;display:grid;place-items:center;cursor:pointer;font:inherit}
.bp-disc{width:75%;max-height:80%;aspect-ratio:1;display:grid;place-items:center;position:relative;border-radius:50%;box-sizing:border-box;border:2px solid #614d38;font:bold clamp(12px,3vmin,35px) Georgia;color:#4b3723;background:radial-gradient(circle at 32% 25%,#fff7db,#e1cba5 73%,#b29976);box-shadow:inset 0 0 0 .2em #ffffff38,0 .11em 0 #837259,0 .16em .17em #22180055}
.bp-disc:after{content:'';position:absolute;inset:16%;border:1px solid currentColor;border-radius:50%;opacity:.28}
.bp-disc.bp-p1{color:#eedfc6;border-color:#27322c;background:radial-gradient(circle at 32% 25%,#596357,#283c35 75%,#192c26);box-shadow:inset 0 0 0 .2em #ffffff15,0 .11em 0 #14221e,0 .16em .17em #1a160d66}
.bp button.bp-selected{outline:3px solid #f1c45b;outline-offset:-3px;z-index:1}.bp button.bp-target{box-shadow:inset 0 0 0 3px #afa95d}.bp-drag{touch-action:none;cursor:grab!important}
.bp-checkers{display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr)}.bp-checkers .dark{background:#788471}.bp-checkers .pale{background:#e5d9b9}
.surface .bp-mancala{display:grid;grid-template:1fr 1fr/repeat(8,minmax(0,1fr));gap:1%;padding:2%;aspect-ratio:2.8;width:min(100cqw,230cqh)}
.bp .bp-pit{min-width:0;background:radial-gradient(ellipse at center,#ac7b45,#9d734b 60%,#765234);border-radius:45%;box-shadow:inset 0 4px 8px #38241888,0 1px 0 #f2d8ae;color:#fff8df}.bp-pit.store13{grid-row:1/3;grid-column:1}.bp-pit.store6{grid-row:1/3;grid-column:8}.bp-seeds{position:absolute;inset:12%;display:flex;align-content:center;flex-wrap:wrap;justify-content:center}.bp-seeds i{width:24%;aspect-ratio:1.35;border-radius:46%;background:radial-gradient(at 35% 25%,#f5deaa,hsl(var(--h) 26% 44%) 55%,#473e2f);box-shadow:0 1px 2px #271c17}.bp-pit strong{position:absolute;bottom:2%;background:#423221b8;border-radius:20px;padding:0 4px;font:600 clamp(10px,1.9cqw,19px) system-ui}
.bp-morris>svg{position:absolute;inset:0;width:100%;height:100%}.bp-morris .bp-node{position:absolute;width:8%;aspect-ratio:1;transform:translate(-50%,-50%);background:#795b3e;border-radius:50%;padding:0;box-shadow:inset 0 4px 4px #432d24aa}.bp-node .bp-disc{width:114%;max-height:none}
.surface .bp-backgammon{display:grid;grid-template-rows:1fr auto 1fr;gap:5%;padding:2%;width:min(100cqw,140cqh);aspect-ratio:1.45;background:#e6cf9e}.bp-points{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px}.bp .bp-point{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;background:transparent;isolation:isolate;gap:1px;padding:2px 0}.bp-point:before{content:'';position:absolute;inset:0;background:#aa6952;clip-path:polygon(2% 0,98% 0,50% 100%);z-index:-1}.bp-point:nth-child(even):before{background:#778e75}.lower .bp-point{flex-direction:column-reverse}.lower .bp-point:before{transform:rotate(180deg)}.bp-point b,.bp-point small{font:600 clamp(9px,1.7cqw,17px) system-ui;color:#222d25;background:#fff4d8cc;padding:0 2px;border-radius:3px}.bp-belt,.bp-ends,.bp-tally,.bp-hand,.bp-chain,.bp-tray,.bp-inputs,.bp-roll-result{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.bp-belt button,.bp-ends button{border-radius:8px;padding:6px 10px;background:#f4e9cf;color:#284539}
.bp-roll{display:grid;gap:10px}.bp-roll label{display:grid;gap:3px;font-size:.8rem;font-weight:600}.bp-inputs{justify-content:flex-start}.bp-roll select{color:var(--ink);background:var(--ui-bg);border:1px solid var(--ui-edge);border-radius:6px;padding:6px}.bp-die{background:linear-gradient(145deg,#fffced,#daceb0);display:inline-grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:clamp(24px,4.5vmin,50px);aspect-ratio:1;border-radius:16%;padding:11%;box-sizing:border-box;gap:8%;box-shadow:0 3px 0 #a6987d}.bp-roll-result>.bp-die{padding:5px}.bp-die i.pip{border-radius:50%;background:#283d34;box-shadow:inset 0 1px 1px #16291c}.bp-die.blank{background:inherit}
.surface .bp-dominoes,.surface .bp-farkle{display:flex;flex-direction:column;justify-content:space-around;gap:12px;align-items:center;padding:3%;background:radial-gradient(ellipse at top,#446f59,#244e3b);color:#fff1d9;overflow:auto}.bp-chain{width:100%;gap:3px}.bp-tile{display:inline-flex;border:1px solid #d6c6a7;border-radius:6px;background:#f7efda;box-shadow:0 2px 0 #a79b81;overflow:hidden}.bp-tile .bp-die{box-shadow:none;background:none;padding:10%;border-radius:0}.bp-tile .bp-die+.bp-die{border-left:1px solid #9f9887}.bp-chain .bp-die{width:clamp(14px,3vmin,28px)}.bp .bp-dom{padding:4px;background:transparent;border-radius:8px}.bp-hand{width:100%}.bp-tray{padding:8%;border-radius:16px;border:2px solid #e8c58e77;background:#1e4837}.bp-tray button{background:none;padding:4px;border-radius:9px}.bp-tray .bp-die{width:clamp(34px,7vmin,65px)}.bp-tally span{display:grid;text-align:center;border:1px solid #b5c1a966;border-radius:9px;padding:3px 7px}.bp-roll-result{margin:.7em 0}.bp button:focus-visible{outline:3px solid #ecbc59;outline-offset:-2px}