/* The fit engine: a board on the wall, a mat on the floor. Motion only under no-preference. */
.fit .hk-rug{display:none}
.fit-flank .hk-win,.fit-flank .hk-plant{visibility:hidden}
.fit-board{position:absolute;left:0;top:0;z-index:5;border-radius:12px;box-shadow:0 16px 22px -8px rgba(90,50,10,.42)}
.fit-board svg{display:block;overflow:visible}
.fit-over{position:absolute;left:0;top:0;z-index:56;pointer-events:none;display:none}
.fit-over.done{display:block}
.fit-over svg{display:block;overflow:visible}
.fit-plate{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;min-width:96px;max-width:92%;padding:0 16px;border-radius:9px;background:linear-gradient(#fff0c0,#e9bd5c);box-shadow:inset 0 1px 0 #fff8e2,0 1.5px 0 #a87c24;color:#3a2606;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden}
.fit-mat{position:absolute;z-index:4;border-radius:28px;background:repeating-linear-gradient(0deg,rgba(150,105,55,.05) 0 2px,transparent 2px 5px),repeating-linear-gradient(90deg,rgba(150,105,55,.05) 0 2px,transparent 2px 5px),#fff4e3;border:7px solid #3457e6;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 9px #ff8fbd,0 5px 0 #1f35b0,0 12px 16px rgba(90,50,10,.22)}
.fit-mat[hidden]{display:none}
.fit-mat-sun{background-color:#fffbea;border-color:#1fb57a;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 9px #ffd24d,0 5px 0 #129a67,0 12px 16px rgba(90,50,10,.22)}
.fit-mat-rose{background-color:#fff6ee;border-color:#e8431f;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 9px #ffc24d,0 5px 0 #b82d10,0 12px 16px rgba(90,50,10,.22)}
.fit .hk-piece{pointer-events:none}
.fit .hk-piece svg{pointer-events:none}
.fit .hk-piece .fit-face{pointer-events:auto}
.fit-hit{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:auto;border-radius:14px}
.hk-piece.seated .fit-sh,.hk-piece.seated .fit-side,.hk-piece.fly.seated .fit-sh{display:none}
.hk-piece.held .fit-sh{opacity:.16}
.fit-socket{position:absolute;left:0;top:0;width:72px;height:72px;z-index:7;border-radius:50%;pointer-events:none;background:none}
.fit-pick{position:absolute;left:0;right:0;bottom:3px;z-index:20;display:flex;flex-wrap:wrap;justify-content:center;pointer-events:none}
.fit-tab{position:relative;pointer-events:auto;width:64px;height:66px;flex:none;display:grid;place-items:center;background:none}
.fit-tab::before{content:"";position:absolute;inset:3px 3px 5px;border-radius:15px;background:linear-gradient(#fbeccd,#e7c592);box-shadow:0 3px 0 #c0935a}
.fit-tab svg{position:relative;width:46px;height:46px}
.fit-tab[aria-pressed=true]::before{background:#fff;box-shadow:0 0 0 3px #1fb57a,0 3px 0 3px #129a67}
.fit .hk-restart{right:auto;z-index:45}
@media (prefers-reduced-motion:no-preference){
 .fit-board.fit-in{animation:fit-in .38s cubic-bezier(.3,1.4,.5,1)}
 @keyframes fit-in{from{transform:translateY(-26px);opacity:.3}}
 .fit-tab{transition:transform .18s cubic-bezier(.3,1.5,.5,1)}
 .fit-tab:active{transform:scale(.93)}
 .fit-drift{animation:fit-drift 7s ease-in-out infinite alternate}
 @keyframes fit-drift{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
 .fit-rise{animation:fit-rise 2.6s ease-out infinite}
 @keyframes fit-rise{0%{transform:translateY(8px);opacity:0}25%{opacity:.9}100%{transform:translateY(-22px);opacity:0}}
 .fit-sway{transform-box:fill-box;transform-origin:50% 100%;animation:fit-sway 2.4s ease-in-out infinite}
 @keyframes fit-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
}