/* Star Jackaroo stage: board art + SVG ring (0..100 units), centre deck/discard, hand dock.
   Colours come from the theme (--sb-* and the seat colours passed in by jackaroo.js). */
.jk-board{position:absolute;inset:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.jk-board-art{position:absolute;inset:0;width:100%;height:100%}
.jk-field{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jk-hole{stroke:var(--sb-cell-line,rgba(0,0,0,.35));stroke-width:.25}
.jk-start{stroke:rgba(255,255,255,.85);stroke-width:.4}
.jk-lane{stroke:rgba(255,255,255,.75);stroke-width:.35;opacity:.9}
.jk-nest{opacity:.32;stroke:rgba(255,255,255,.6);stroke-width:.35;pointer-events:none}
.jk-socket{fill:rgba(0,0,0,.28);pointer-events:none}
.jk-holes{pointer-events:none}

.jk-token{cursor:default;outline:none}
.jk-token image{pointer-events:none}
.jk-hit{fill:transparent}
.jk-shadow{fill:rgba(0,0,0,.35)}
.jk-ring{fill:none;stroke-width:.5;opacity:0}
.jk-token.legal{cursor:pointer}
.jk-token.legal .jk-ring{opacity:1;fill:rgba(255,255,255,.25);stroke:var(--sb-glow,#fff2a8);animation:jk-glow .9s ease-in-out infinite}
.jk-token.legal .jk-token-art{animation:jk-bob .9s ease-in-out infinite}
.jk-token.picked .jk-ring{opacity:1;fill:rgba(255,255,255,.4);stroke:#fff;stroke-width:.8}
.jk-token:focus-visible .jk-ring{opacity:1;stroke:#fff;stroke-width:.8}
@keyframes jk-glow{50%{stroke-width:.9;opacity:.65}}
@keyframes jk-bob{50%{transform:translateY(-.8px)}}

/* centre pile: deck (face down + count) and discard */
.jk-pile{position:absolute;inset:0;pointer-events:none}
.jk-deck,.jk-discard,.jk-pile-card{position:absolute;top:calc(50% - 28px);width:40px;height:56px;border-radius:6px}
.jk-deck{left:calc(44.5% - 20px);background:center/100% 100% no-repeat;box-shadow:0 2px 0 rgba(0,0,0,.35),2px 3px 0 rgba(0,0,0,.2)}
.jk-deck-count{position:absolute;right:-6px;bottom:-6px;min-width:18px;padding:1px 4px;border-radius:9px;background:var(--sb-ink,#222);color:var(--sb-paper,#fff);font:800 11px/16px var(--sb-font-display,sans-serif);text-align:center}
.jk-discard{left:calc(55.5% - 20px);border:1.5px dashed rgba(255,255,255,.45)}
.jk-discard .jk-pile-card{left:-1.5px;top:-1.5px}
.jk-pile>.jk-pile-card{left:calc(55.5% - 20px)}
.jk-fly{z-index:3;will-change:transform}

/* cards (hand and pile share the face) */
.jk-card{--jk-x:0px;--jk-y:0px;--jk-r:0deg;position:relative;direction:ltr;display:block;padding:0;border:0;border-radius:6px;background:#fff center/100% 100% no-repeat;
  box-shadow:0 2px 3px rgba(0,0,0,.35);color:#1e1e1e;font-family:var(--sb-font-display,sans-serif);overflow:hidden}
.jk-card[data-suit=red]{color:#c3262e}
.jk-corner{position:absolute;left:3px;top:2px;font:800 11px/1 var(--sb-font-display,sans-serif);letter-spacing:-.5px}
.jk-rank{position:absolute;right:3px;bottom:2px;font:900 13px/1 var(--sb-font-display,sans-serif);transform:rotate(180deg)}
.jk-pip{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;line-height:1}
.jk-face{position:absolute;left:12%;top:16%;width:76%;height:68%;object-fit:contain;pointer-events:none}
.jk-pile-card .jk-pip{font-size:18px}

/* dock: hint, fanned hand, choice chips */
.jk-hint{margin:0;min-height:28px;display:flex;align-items:center;justify-content:center;text-align:center;font:700 12px/1.15 var(--sb-font-body,sans-serif);color:var(--sb-paper,#fff);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.jk-hand{position:relative;height:78px;width:100%}
.jk-hand .jk-card{position:absolute;left:calc(50% - 25px);top:6px;width:50px;height:70px;transform-origin:50% 120%;
  transform:translate(var(--jk-x),var(--jk-y)) rotate(var(--jk-r));transition:transform .18s ease-out,filter .2s,opacity .2s}
.jk-hand .jk-card.playable.dead:not(.selected){filter:saturate(.55) brightness(.88);box-shadow:0 0 0 2px rgba(255,255,255,.6),0 2px 3px rgba(0,0,0,.35)}
.jk-hand .jk-card.playable{cursor:pointer;box-shadow:0 0 0 2px var(--sb-glow,#fff2a8),0 0 10px var(--sb-glow,#fff2a8)}
.jk-hand .jk-card.selected{z-index:2;transform:translate(var(--jk-x),calc(var(--jk-y) - 12px)) rotate(var(--jk-r)) scale(1.08);box-shadow:0 0 0 3px #fff,0 0 14px var(--sb-glow,#fff2a8)}
.jk-hand.dealt .jk-card{animation:jk-deal .45s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--jk-i) * 70ms)}
@keyframes jk-deal{from{transform:translate(0,-120px) rotate(0) scale(.6);opacity:0}}
.jk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:30px}
.jk-chip{min-width:44px;height:30px;padding:0 10px;border:0;border-radius:15px;background:var(--sb-accent,#f2b84b);color:var(--sb-ink,#222);font:800 13px/30px var(--sb-font-display,sans-serif);
  box-shadow:0 3px 0 rgba(0,0,0,.3);cursor:pointer}
.jk-chip[data-chip=undo]{background:rgba(255,255,255,.85)}
.jk-chip[data-chip=ban]{background:var(--sb-accent2,#c4462f);color:#fff}
.jk-chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}

/* effect banner over the board */
.jk-banner{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);padding:6px 16px;border-radius:16px;background:rgba(0,0,0,.62);color:var(--sb-glow,#fff2a8);
  font:900 20px/1.1 var(--sb-font-display,sans-serif);white-space:nowrap;opacity:0;pointer-events:none;text-shadow:0 2px 3px rgba(0,0,0,.6)}
.jk-banner.show{animation:jk-banner 1.3s ease-out forwards}
@keyframes jk-banner{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .jk-token.legal .jk-ring,.jk-token.legal .jk-token-art,.jk-hand.dealt .jk-card,.jk-banner.show{animation:none}
  .jk-banner.show{opacity:1;transform:translate(-50%,-50%)}
  .jk-hand .jk-card{transition:none}
}