*{box-sizing:border-box;margin:0;padding:0}body{min-width:320px}.board{touch-action:none;background:#fafafa;width:100%;height:100dvh;position:relative;overflow:hidden}.label{background-color:#fff;padding:0 5px;font-size:13px;font-weight:700;position:absolute;top:-10px;left:10px}.inputValue{z-index:9999;gap:10px;display:flex;position:absolute;top:20px;left:20px}.inputValue input{border:2px solid purple;border-radius:6px;outline:none;width:210px;padding:10px;font-size:20px}.showBtn,.resetBtn{color:#fff;cursor:pointer;background:purple;border:none;border-radius:6px;padding:8px 16px;font-weight:700}.resetBtn{z-index:10000;background:green;padding:12px 16px;position:absolute;bottom:20px;right:20px}.main-board{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.cube{color:#500082e6;z-index:1;background:#b482ff66;border:2px solid #8000804d;border-radius:6px;justify-content:center;align-items:center;width:55px;height:55px;font-weight:700;transition:background .3s,color .3s,border-color .3s;display:flex}.cube.filled{color:#fff;background:purple;border-color:purple;animation:.25s pop;transform:scale(1.05)}@keyframes pop{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.cube.win{animation:.6s 3 win-pop}@keyframes win-pop{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.letter-box{color:#fff;cursor:grab;z-index:10;touch-action:none;background:purple;border-radius:6px;justify-content:center;align-items:center;width:40px;height:40px;font-weight:700;transition:transform .2s,opacity .2s;display:flex;position:absolute}.letter-box:active{transform:scale(1.1)}.letter-box.fade-out{opacity:0}.letter-box,.letter-box *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.firework{pointer-events:none;z-index:999;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}.firework .particle{background:hsl(calc(360/12*var(--i)),90%,60%);border-radius:50%;width:6px;height:6px;animation:1.4s ease-out forwards firework-burst;position:absolute}@keyframes firework-burst{0%{transform:rotate(calc(30deg*var(--i)))translate(0,0);opacity:1}70%{transform:rotate(calc(30deg*var(--i)))translate(140px,-140px)}to{transform:rotate(calc(30deg*var(--i)))translate(160px,-160px);opacity:0}}.scatter-piece{opacity:0;transform-origin:50%;border-radius:2px;animation:.9s ease-out forwards scatter-fly;position:absolute}@keyframes scatter-fly{0%{opacity:0;transform:scale(.5)rotate(0)}50%{opacity:1}to{transform:scale(1)rotate(var(--r,360deg));opacity:1}}.win-message{text-align:center;color:purple;text-shadow:0 0 10px #8000804d;z-index:3;background-color:orange;width:100%;font-size:28px;font-weight:600;animation:1s forwards appearText;position:absolute;bottom:40px}.opa{background-color:orange;border-radius:10px;width:800px;padding:10px;position:absolute;bottom:50px;left:50%;transform:translate(-50%)}.opa span{color:#fff}@keyframes appearText{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:1000px){.opa{width:600px}}@media (max-width:700px){.opa{width:500px;font-size:18px}}@media (max-width:600px){.inputValue input{width:170px;font-size:15px}.showBtn,.resetBtn{font-size:12px}.opa{width:400px}.label{font-size:10px}.cube{width:50px;height:50px;font-size:22px}.letter-box{width:38px;height:38px;font-size:18px}}@media (max-width:500px){.opa{width:300px;font-size:14px}}