.die{width:var(--die-size);height:var(--die-size);display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));grid-template-rows:repeat(3, minmax(0, 1fr));padding:calc(var(--die-size)*.14);border-radius:18%;box-shadow:0 2px 6px rgba(0,0,0,.5)}.die--white{background:#f4f4f6;--pip: #1a1a1a}.die--black{background:#1a1a1a;--pip: #f4f4f6}.die__pip{align-self:center;justify-self:center;width:calc(var(--die-size)*.18);height:calc(var(--die-size)*.18);border-radius:50%;background:var(--pip)}.die__pip--tl{grid-area:1/1}.die__pip--tr{grid-area:1/3}.die__pip--ml{grid-area:2/1}.die__pip--c{grid-area:2/2}.die__pip--mr{grid-area:2/3}.die__pip--bl{grid-area:3/1}.die__pip--br{grid-area:3/3}:root{--card-w: 160px;--card-h: 223px;--pawn-size: 80px;--die-size: 80px;--table-size: 4000px}*{box-sizing:border-box}body{margin:0;font-family:var(--card-font, Inter, system-ui, sans-serif);background:#0e0e14;color:#e8e8f0}.viewport{position:fixed;inset:0;overflow:hidden;background:#34343c;cursor:grab;touch-action:none}.viewport.is-panning{cursor:grabbing}.table{position:absolute;top:0;left:0;width:var(--table-size);height:var(--table-size);transform-origin:0 0}.piece{position:absolute;top:0;left:0;transform-origin:50% 50%;touch-action:none;user-select:none;cursor:grab}.piece.is-dragging{cursor:grabbing}.card{width:var(--card-w);height:var(--card-h);border-radius:3px}.card__layer{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.card__face .card-svg{display:block;width:100%;height:100%}.card__back{align-items:center;justify-content:center;background:var(--back-colour, #1b1b26);border:1px solid rgba(0,0,0,.35);box-shadow:0 2px 8px rgba(0,0,0,.5)}.card__back-wordmark{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:2.4rem;line-height:1.1;text-align:center;color:rgba(0,0,0,.55)}.card__face{display:block}.card__back{display:none}.card.is-face-down .card__face{display:none}.card.is-face-down .card__back{display:flex}.pawn{width:var(--pawn-size);height:var(--pawn-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--pawn-colour);border:2px solid rgba(0,0,0,.45);box-shadow:0 2px 6px rgba(0,0,0,.5);font-weight:700;font-size:calc(var(--pawn-size)*.5);line-height:1;color:rgba(0,0,0,.72)}.controls{position:fixed;top:.75rem;right:.75rem;display:flex;gap:.5rem;z-index:1000}.control{font:inherit;font-size:.85rem;color:#e8e8f0;background:#1b1b26;border:1px solid #33334a;border-radius:4px;padding:.35rem .7rem;cursor:pointer}.control:hover{border-color:#55557a}.dice-tray{position:fixed;left:.75rem;bottom:.75rem;z-index:1000;display:flex;gap:.5rem;background:rgba(0,0,0,0)}.die--source{cursor:grab}.menu{position:fixed;z-index:2000;min-width:10rem;display:flex;flex-direction:column;padding:.25rem;background:#1b1b26;border:1px solid #33334a;border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.5)}.menu[hidden]{display:none}.menu button{font:inherit;font-size:.85rem;text-align:left;color:#e8e8f0;background:rgba(0,0,0,0);border:0;border-radius:3px;padding:.4rem .6rem;cursor:pointer}.menu button:hover{background:#33334a}.menu__values{display:grid;grid-template-columns:repeat(3, 1fr);gap:.25rem}.menu__values button{text-align:center;padding:.4rem .5rem}.modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);cursor:zoom-out}.modal[hidden]{display:none}.modal__card{height:min(85vh,720px);aspect-ratio:63/88;border-radius:6px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.6)}.modal__card .card-svg{display:block;width:100%;height:100%}