.board-screw{--board-accent:#e4572e}.screw-field-wrap{width:min(100%, var(--stage-w), calc((max(0px, var(--stage-h) - 216px)) * 600 / 470))}@media (max-height:500px) and (orientation:landscape){.screw-field-wrap{width:min(100%, var(--stage-w), calc((max(0px, var(--stage-h) - 128px)) * 600 / 470))}.screw-keys{display:none}}.screw-field{touch-action:manipulation;-webkit-user-select:none;user-select:none;background:repeating-linear-gradient(0deg,#ffebc80b 0 1px,#0000 1px 44px),repeating-linear-gradient(90deg,#ffebc80b 0 1px,#0000 1px 44px),radial-gradient(circle at 16% 8%,#e4572e24 0 110px,#0000 111px),linear-gradient(160deg,#41301f,#2a1d12)}.screw-plate{transition:transform .38s}.screw-hole{transition:left .38s,top .38s,opacity .18s,filter .18s}.screw-hole-covered{filter:brightness(.55)saturate(.6)}@keyframes screw-pop{0%{transform:translate(-50%,-50%)scale(1)}45%{transform:translate(-50%,-50%)scale(1.22)}to{transform:translate(-50%,-50%)scale(1)}}.screw-hole-pop{animation:.18s ease-in-out screw-pop}@keyframes screw-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(40px)rotate(9deg)}}.screw-plate-fallen{pointer-events:none;animation:.5s ease-in both screw-fall}@keyframes screw-pulse{0%,to{box-shadow:0 0 #ffd2788c}50%{box-shadow:0 0 0 7px #ffd27800}}.screw-hole-placeable{border-radius:9999px;animation:1.15s ease-in-out infinite screw-pulse}@media (prefers-reduced-motion:reduce){.board-screw *,.board-screw :before,.board-screw :after{transition-duration:10ms!important;animation-duration:10ms!important;animation-iteration-count:1!important}}
