/* Star Domino stage: table art + snake chain (tiles sized by --u), and a full-width dock with the
   stock, the Draw / Pass button and the hand fan. The runtime sets data-game=domino on .sb-app so
   the board host, dock and bottom seats can be re-laid for a wide table and a hand row. */
.sb-app[data-game=domino] .sb-board-host{left:8px;top:140px;width:374px;height:300px}
.sb-app[data-game=domino] .sb-seat-bl,.sb-app[data-game=domino] .sb-seat-br{top:444px}
.sb-app[data-game=domino] .sb-dock{left:0;width:390px;top:440px;height:216px;display:block;pointer-events:none}
.sb-app[data-game=domino] .sb-dock>*{pointer-events:auto}

.dm-board{position:absolute;inset:0}
.dm-board-art{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.dm-chain{position:absolute;inset:0;--u:20px}
.dm-fx{position:absolute;inset:0;pointer-events:none;z-index:3}

/* tiles: u wide, 2u tall; lying tiles are rotated by the transform the stage sets */
.dm-tile{position:absolute;left:0;top:0;width:var(--u);height:calc(var(--u)*2);display:flex;flex-direction:column;background:var(--dm-art) center/100% 100% no-repeat;
  transform-origin:50% 50%;filter:drop-shadow(0 calc(var(--u)*.08) calc(var(--u)*.08) rgba(0,0,0,.45))}
.dm-half{flex:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;padding:calc(var(--u)*.16)}
.dm-pip{width:calc(var(--u)*.2);height:calc(var(--u)*.2);border-radius:50%}
.dm-pip.on{background:radial-gradient(circle at 35% 35%,var(--sb-pip-hi,#5a4a42),var(--sb-pip,#1d1714) 70%)}
.dm-placed{transition:transform .35s cubic-bezier(.3,.8,.3,1)}

/* end choice when a tile fits both ends */
.dm-slot{position:absolute;left:0;top:0;width:var(--u);height:calc(var(--u)*2);border-radius:calc(var(--u)*.18);border:2px dashed var(--sb-glow,#fff2a8);
  background:rgba(255,255,255,.22);box-shadow:0 0 12px var(--sb-glow,#fff2a8);transform-origin:50% 50%;animation:dm-glow .8s ease-in-out infinite;z-index:2}
@keyframes dm-glow{50%{background:rgba(255,255,255,.42);box-shadow:0 0 20px var(--sb-glow,#fff2a8)}}
.dm-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);margin:0;padding:3px 10px;border-radius:10px;background:rgba(0,0,0,.55);font-size:11.5px;font-weight:800;white-space:nowrap;z-index:2}

/* dock: actions row + hand */
.dm-tray{position:absolute;inset:0}
.dm-actions{position:absolute;left:100px;width:190px;top:2px;height:62px;display:flex;align-items:center;justify-content:center;gap:10px}
.dm-stock{position:relative;width:30px;height:56px;flex:none}
.dm-stock-art{width:26px;height:52px;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.25)) drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.dm-stock-count{position:absolute;right:-8px;bottom:-2px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--sb-accent,#ffd447);color:var(--sb-ink,#3b1a06);
  font:900 12px/20px var(--sb-font-display);text-align:center;text-shadow:none}
.dm-stock.empty{opacity:.45}
.dm-action{width:128px;height:50px;background:var(--sb-art-actionButton) center/100% 100% no-repeat;color:var(--sb-paper,#fff);font:900 17px/1 var(--sb-font-display);
  text-shadow:0 2px 2px rgba(0,0,0,.6);filter:drop-shadow(0 3px 2px rgba(0,0,0,.35));transition:transform .12s}
.dm-action.ready{animation:dm-ready 1.1s ease-in-out infinite}
.dm-action:active{transform:scale(.94)}
@keyframes dm-ready{50%{transform:scale(1.06)}}

.dm-hand{position:absolute;left:0;width:390px;top:70px;height:140px;--u:28px}
.dm-in-hand{left:var(--dm-x);top:auto;bottom:10px;transform:translateY(calc(var(--dm-lift)*-1)) rotate(var(--dm-tilt));transform-origin:50% 100%;
  transition:transform .18s ease-out,filter .2s,opacity .2s;outline:none}
.dm-hand.my-turn .dm-in-hand.dim{filter:brightness(.72) saturate(.7) drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.dm-in-hand.legal{cursor:pointer;transform:translateY(calc(var(--dm-lift)*-1 - 10px)) rotate(var(--dm-tilt));
  filter:drop-shadow(0 0 6px var(--sb-glow,#fff2a8)) drop-shadow(0 0 2px var(--sb-glow,#fff2a8));animation:dm-legal 1s ease-in-out infinite}
.dm-in-hand.selected{transform:translateY(calc(var(--dm-lift)*-1 - 22px)) rotate(0deg);animation:none;filter:drop-shadow(0 0 9px var(--sb-glow,#fff2a8))}
.dm-in-hand:focus-visible{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px #fff)}
@keyframes dm-legal{50%{filter:drop-shadow(0 0 10px var(--sb-glow,#fff2a8)) drop-shadow(0 0 3px var(--sb-glow,#fff2a8))}}

/* fx */
.dm-spark{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;animation:dm-spark .65s ease-out forwards}
@keyframes dm-spark{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.5);opacity:0}}
.dm-flyer{position:absolute;left:0;top:0;width:22px;height:44px}
.dm-bubble{position:absolute;padding:3px 10px;border-radius:12px;background:var(--sb-paper,#fff6dc);color:var(--sb-ink,#3b1a06);font:900 13px/1.2 var(--sb-font-display);
  box-shadow:0 2px 0 rgba(0,0,0,.3);animation:dm-bubble 1.4s ease-out forwards;white-space:nowrap}
.dm-at-tl{left:56px;top:-30px}.dm-at-tr{right:56px;top:-30px}.dm-at-bl{left:56px;top:310px}.dm-at-br{right:56px;top:310px}
@keyframes dm-bubble{0%{transform:translateY(8px) scale(.6);opacity:0}15%{transform:none;opacity:1}75%{opacity:1}100%{transform:translateY(-10px);opacity:0}}

/* round summary */
.dm-round{position:absolute;left:37px;top:20px;width:300px;height:262px;padding:24px 30px 18px;background:var(--sb-art-panel) center/100% 100% no-repeat;color:var(--sb-ink,#3b1a06);
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;z-index:4;animation:sb-rise .25s ease-out}
.dm-round-title{margin:0;font:900 16px/1.15 var(--sb-font-display)}
.dm-round-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow-y:auto}
.dm-round-row{position:relative;display:grid;grid-template-columns:24px 1fr auto 34px;align-items:center;gap:6px;height:28px;padding:0 6px;border-radius:9px;background:rgba(255,255,255,.5);
  font-size:12px;font-weight:800;--sb-seat-color:#888}
.dm-round-row .sb-badge{position:relative;inset:auto;width:22px;height:22px;font-size:11px}
.dm-round-row.winner{background:rgba(255,255,255,.88);box-shadow:0 0 0 2px var(--sb-accent,#ffd447) inset}
.dm-round-row.me .dm-round-name{text-decoration:underline}
.dm-round-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.dm-round-gain{color:var(--sb-accent2,#c06a10);text-align:end}
.dm-round-note{margin:0;font-size:11px;font-weight:700;opacity:.85}
.dm-next{min-width:140px;height:40px}

@media (prefers-reduced-motion:reduce){
  .dm-placed,.dm-in-hand{transition:none}
  .dm-in-hand.legal,.dm-action.ready,.dm-slot{animation:none}
}