.tabletop3d-preview{display:grid;place-items:center;position:relative;width:100%;height:560px;perspective:1800px;background:radial-gradient(ellipse at center,#7d623b28,transparent 70%);border:1px solid #eab30840;border-radius:20px;overflow:hidden;cursor:zoom-in;color:#facc15}
.tabletop3d-world{--scene-size:600px;position:relative;width:var(--scene-size);height:var(--scene-size);transform-style:preserve-3d;transform:rotateX(55deg) rotateZ(-18deg);pointer-events:none;user-select:none}
.tabletop3d-world *{box-sizing:border-box}.tabletop3d-world img{max-width:none}
.tabletop3d-board{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(0);backface-visibility:hidden;border-radius:2px;box-shadow:0 0 35px #0005}
.tabletop3d-board-edge{position:absolute;background:linear-gradient(#6e4729,#3f2717);backface-visibility:hidden}
.tabletop3d-board-front,.tabletop3d-board-back{width:100%;height:calc(var(--scene-size)*.012);left:0;transform-origin:center}
.tabletop3d-board-front{top:100%;transform:translateY(-50%) translateZ(calc(var(--scene-size)*-.006)) rotateX(-90deg)}.tabletop3d-board-back{top:0;transform:translateY(-50%) translateZ(calc(var(--scene-size)*-.006)) rotateX(90deg)}
.tabletop3d-board-left,.tabletop3d-board-right{width:calc(var(--scene-size)*.012);height:100%;top:0;transform-origin:center;background:#53371b}
.tabletop3d-board-left{left:0;transform:translateX(-50%) translateZ(calc(var(--scene-size)*-.006)) rotateY(-90deg)}.tabletop3d-board-right{left:100%;transform:translateX(-50%) translateZ(calc(var(--scene-size)*-.006)) rotateY(90deg)}
.tabletop3d-tile{position:absolute;width:10%;height:10%;transform:translateZ(calc(var(--scene-size)*(.007 + var(--tile-lift,0)))) rotateZ(var(--tile-angle));backface-visibility:visible}
.tabletop3d-pawn{position:absolute;width:0;height:0;transform:translateZ(calc(var(--scene-size)*(.01 + var(--pawn-jump,0))));transform-style:preserve-3d;--base-d:calc(var(--scene-size)*.0531);--base-h:calc(var(--scene-size)*.0072)}
.tabletop3d-base-top,.tabletop3d-base-bottom{position:absolute;width:var(--base-d);height:var(--base-d);border-radius:50%;transform:translate(-50%,-50%) translateZ(var(--base-h));background:radial-gradient(ellipse at 35% 25%,#fff,#e7e7e3 70%,#bcbcb7)}
.tabletop3d-base-bottom{transform:translate(-50%,-50%);background:#d5d5cf;box-shadow:0 3px 6px #0005}
.tabletop3d-base-wall{position:absolute;left:0;top:0;width:calc(var(--base-d)*.101);height:var(--base-h);background:linear-gradient(#fff,#d1d1cd);filter:brightness(var(--wall-light));transform:rotateZ(var(--wall-angle)) translateY(calc(var(--base-d)/-2)) rotateX(-90deg) translate(-50%,-100%);transform-origin:0 0}
.tabletop3d-jaw{position:absolute;left:0;top:0;width:calc(var(--base-d)*.76);height:calc(var(--base-d)*.08);background:#f5f5f2;transform:translateY(calc(var(--scene-size)*.0025*var(--jaw-side))) translateZ(var(--base-h)) rotateX(-90deg) translate(-50%,-100%);box-shadow:0 -1px 0 #fff}
.tabletop3d-standee{position:absolute;left:0;top:0;width:var(--pawn-w);height:var(--pawn-h);transform-origin:0 0;transform-style:preserve-3d;transform:translateZ(calc(var(--base-h)*.85)) rotateZ(var(--piece-angle)) rotateX(-90deg) translate(-50%,-100%)}
.is-mount{--base-h:0px}
.tabletop3d-art{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;transform:translateZ(calc(var(--scene-size)*.0018))}
.tabletop3d-art img{position:absolute;left:var(--art-x);top:var(--art-y);width:var(--art-w);height:var(--art-h)}
.tabletop3d-art-back{transform:rotateY(180deg) translateZ(calc(var(--scene-size)*.0018)) scaleX(-1);filter:brightness(.83)}.tabletop3d-art-back img{transform:none}
.tabletop3d-cardboard{position:absolute;inset:0;background:#9e8a69;transform:translateZ(calc(var(--scene-size)*var(--layer)));mask-image:var(--pawn-mask);mask-size:var(--art-w) var(--art-h);mask-position:var(--mask-x) var(--mask-y);mask-repeat:no-repeat}
.tabletop3d-pile{position:absolute;width:13%;height:13%;transform-style:preserve-3d}.tabletop3d-stack-tile{position:absolute;inset:0;width:100%;height:100%;transform:translateX(calc(var(--scene-size)*var(--pile-x))) translateZ(calc(var(--scene-size)*var(--pile-z))) rotateZ(var(--pile-angle));}
.tabletop3d-dice{position:absolute;left:114%;top:99%;width:calc(var(--scene-size)*.042);height:calc(var(--scene-size)*.042);transform-style:preserve-3d;transform:translateZ(calc(var(--scene-size)*.021)) rotateZ(15deg);--dice-half:calc(var(--scene-size)*.021)}
.tabletop3d-dice-face{position:absolute;inset:0;width:100%;height:100%;border:1px solid #fff;border-radius:0;background:#fff;box-shadow:0 0 0 1px #fff;backface-visibility:hidden}
.dice-side-0{transform:translateZ(var(--dice-half))}.dice-side-1{transform:rotateY(180deg) translateZ(var(--dice-half))}.dice-side-2{transform:rotateY(90deg) translateZ(var(--dice-half))}.dice-side-3{transform:rotateY(-90deg) translateZ(var(--dice-half))}.dice-side-4{transform:rotateX(90deg) translateZ(var(--dice-half))}.dice-side-5{transform:rotateX(-90deg) translateZ(var(--dice-half))}
.tabletop3d-open-label{position:absolute;bottom:18px;left:0;width:100%;font-weight:bold;font-size:18px}
#tabletop3d-dialog{padding:0;border:0;background:transparent;color:#fff8e9;width:calc(100vw - 16px);height:96dvh;max-width:1600px;max-height:96dvh;overflow:hidden;font:14px system-ui}
#tabletop3d-dialog[open]{display:flex;flex-direction:column}#tabletop3d-dialog::backdrop{background:#100b08c9;backdrop-filter:blur(12px)}
#tabletop3d-dialog header{padding:18px 55px 0 20px}#tabletop3d-title{font-size:22px;font-weight:700;margin:0}#tabletop3d-close{position:absolute;right:12px;top:8px;font-size:30px;background:none;border:0;color:inherit;padding:5px 10px;cursor:pointer}
#tabletop3d-stage{position:relative;display:grid;place-items:center;flex:1;min-height:0;perspective:1800px;overflow:hidden;touch-action:none;cursor:grab}#tabletop3d-stage.is-dragging{cursor:grabbing}
.tabletop3d-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px;flex-shrink:0}.tabletop3d-controls button{border:1px solid #fff5;border-radius:9px;padding:10px 14px;background:#0004;color:inherit;cursor:pointer}.tabletop3d-controls button[aria-pressed=true]{background:#e9b52c;color:#302416}
#tabletop3d-dialog :focus-visible,.tabletop3d-preview:focus-visible{outline:3px solid #e9b52c;outline-offset:3px}
@media(max-width:640px){.tabletop3d-preview{height:330px}#tabletop3d-title{font-size:18px}.tabletop3d-open-label{font-size:15px}}

.tabletop3d-slab{transform-style:preserve-3d;--slab-thickness:calc(var(--scene-size)*.006)}
.tabletop3d-rounded-dice{position:absolute;display:block;min-width:0;min-height:0;max-width:none;max-height:none;transform:translate(-50%,-50%);aspect-ratio:1;pointer-events:none}
.tabletop3d-dice.has-rounded-dice>.tabletop3d-dice-face{display:none}
.tabletop3d-slab>img{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(.1px)}
.tabletop3d-slab-edge{position:absolute;background:linear-gradient(#cbbb99,#8e7958);backface-visibility:hidden}
.slab-front,.slab-back{left:0;width:100%;height:var(--slab-thickness);transform-origin:center}
.slab-front{top:100%;transform:translateY(-50%) translateZ(calc(var(--slab-thickness)/-2)) rotateX(-90deg)}
.slab-back{top:0;transform:translateY(-50%) translateZ(calc(var(--slab-thickness)/-2)) rotateX(90deg)}
.slab-left,.slab-right{top:0;height:100%;width:var(--slab-thickness);transform-origin:center}
.slab-left{left:0;transform:translateX(-50%) translateZ(calc(var(--slab-thickness)/-2)) rotateY(-90deg)}
.slab-right{left:100%;transform:translateX(-50%) translateZ(calc(var(--slab-thickness)/-2)) rotateY(90deg)}
.tabletop3d-slab::before{content:"";position:absolute;inset:0;background:#ac9875;transform:translateZ(calc(var(--slab-thickness)*-1)) rotateY(180deg);backface-visibility:hidden}

#tabletop3d-dialog.tabletop3d-inline{display:flex;flex-direction:column;position:relative;width:100%;height:360px;max-height:none;margin:0;overflow:hidden}
.tabletop3d-inline>header,.tabletop3d-inline>#tabletop3d-close,.tabletop3d-inline>.tabletop3d-controls{display:none}
.tabletop3d-inline #tabletop3d-stage{touch-action:pan-y;cursor:default;pointer-events:none}
@media(max-width:640px){#tabletop3d-dialog.tabletop3d-inline{height:280px}}