/* Match engine: the tray, the empty places, the boxes on the floor. Motion lives only in the guard at the end. */
.hk-tray{position:absolute;border-radius:20px;background:linear-gradient(#fbecd0,#e8c797);box-shadow:inset 0 2px 0 #fff6e3,inset 0 -3px 0 #d6ab74,0 3px 0 #bd9058,0 16px 24px -8px rgba(70,35,5,.45);pointer-events:none}
.hk-pool{background:linear-gradient(#f3dcb4,#dcb681)}
.hk-ledge{position:absolute;height:6px;margin-top:-1px;border-radius:3px;background:#c99b63;box-shadow:0 1px 0 #fff3dc;pointer-events:none}
.hk-fixed,.hk-seat{position:absolute;left:0;top:0;display:block;padding:0;margin:0;border:0;background:none;touch-action:none;outline:0;border-radius:14px}
.hk-fixed svg,.hk-seat svg{position:absolute;display:block;pointer-events:none;overflow:visible}
.hk-fixed{z-index:20;cursor:pointer}
.hk-fixed svg{transition:filter .35s}
.hk-seat{z-index:10;cursor:pointer}
.hk-seat[data-filled=true] svg{opacity:0}
.hk-seat .hk-sh,.hk-fixed .hk-sh,.hk-piece.paired .hk-sh{display:none}
.hk-well{fill:rgba(120,75,20,.1);stroke:#b98a50;stroke-width:2.4;stroke-dasharray:6 5;stroke-linecap:round}
.hk-fixed:focus-visible,.hk-seat:focus-visible,.hk-box:focus-visible{outline:4px solid #20183a;outline-offset:2px}
.hk-picking .hk-seat[data-filled=false] .hk-well{fill:rgba(255,255,255,.75);stroke:#2e66d1}
.hk-piece.picked svg{filter:drop-shadow(0 12px 9px rgba(60,20,40,.35))}
.hk-fixed.lit svg,.hk-piece.lit svg{filter:brightness(1.16) saturate(1.1)}
.hk-join{position:absolute;z-index:40;display:block;opacity:0;pointer-events:none}
.hk-join.on{opacity:1}
.hk-join.lit{filter:brightness(1.14) saturate(1.1)}
.hk-melt{position:absolute;z-index:45;opacity:0;pointer-events:none}
.hk-melt.on{opacity:1}
.hk-match .hk-restart{right:auto;top:0;z-index:190}
.hk-box{position:absolute;z-index:180;width:64px;height:64px;display:grid;place-items:center;border-radius:16px}
.hk-box svg{transform:scale(.8);transition:transform .18s}
.hk-box[aria-pressed=true] svg{transform:none;filter:drop-shadow(0 3px 0 rgba(60,30,5,.4))}
.hk-box[aria-pressed=true]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:5px;border-radius:3px;background:#20183a}
.hk-arcs,.hk-mallet{opacity:0}
.hk-rime{font-weight:700}
.paired .hk-rime{fill:#e8341f}
@media (prefers-reduced-motion:no-preference){
 .hk-join.on{animation:hk-m-join .28s ease-out both}
 @keyframes hk-m-join{from{opacity:0}}
 .ring .hk-mallet{transform-box:view-box;transform-origin:101px 116px;animation:hk-m-strike .55s ease-out}
 @keyframes hk-m-strike{0%{opacity:1;transform:rotate(26deg)}22%{opacity:1;transform:rotate(0)}45%{opacity:1;transform:rotate(12deg)}100%{opacity:0;transform:rotate(16deg)}}
 .hk-join.lit{animation:hk-m-hop .4s ease-out}
 @keyframes hk-m-hop{45%{transform:translateY(-14px)}}
 .hk-melt{transition:opacity .9s ease}
 .ring .hk-arcs{transform-box:fill-box;transform-origin:center;animation:hk-m-arcs .75s ease-out}
 @keyframes hk-m-arcs{0%{opacity:0;transform:scale(.82)}25%{opacity:1}100%{opacity:0;transform:scale(1.14)}}
 .hk-box:hover svg{transform:scale(.9)}
 .hk-box[aria-pressed=true]:hover svg{transform:none}
 .hk-picking .hk-seat[data-filled=false] svg{animation:hk-m-open 1.1s ease-in-out infinite}
 @keyframes hk-m-open{50%{transform:scale(1.05)}}
}