.block{width:20px;height:20px;position:relative;margin:1px}.dragging{width:35px;height:35px}.fill{margin:0;border:1px solid #1e264a;cursor:pointer;border-radius:1px;transition:transform .2s;box-shadow:.1rem .3rem .4rem rgba(0,0,0,.3),inset 0 -.3rem .2rem rgba(0,0,0,.3),inset -.3rem 0 .2rem rgba(0,0,0,.2),inset 0 .3rem 1rem hsla(0,0%,100%,.4),inset .3rem 0 .2rem hsla(0,0%,100%,.1)}.custom-piece-overlay,.fill{display:flex;align-items:center;justify-content:center}.custom-piece-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)}.custom-piece-overlay-content{background:linear-gradient(180deg,#4358ad,#2c3e75);padding:20px;border-radius:10px;text-align:center}.custom-piece-grid{display:flex;flex-direction:column;width:320px;margin:0 auto;background-color:#1e264a;gap:0;border:4px solid #374b81;border-radius:5px;width:-moz-fit-content;width:fit-content}.custom-piece-row{display:flex;justify-content:center;align-items:center;gap:0}.custom-piece-cell{border-top:2px solid #1e264a;border-left:2px solid #1e264a;height:40px;width:40px;transition:background-color .3s;background-color:#232b54}.custom-piece-cell.filled{background-color:#5b6cb9}.custom-piece-controls{margin-top:20px}.custom-piece-button{margin:0 10px;padding:10px 20px;font-size:16px;cursor:pointer}.select-shapes-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center}.select-shapes-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px}.select-shapes-header h2{margin:0;color:#fff}.select-shapes-content{background:linear-gradient(180deg,#4358ad,#2c3e75);padding:20px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.3);width:90%;max-width:600px}.select-shapes-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;margin-bottom:20px;max-height:70vh;overflow-y:auto}.select-shapes-cell{background:#333;padding:10px;border-radius:5px;cursor:pointer;transition:background .3s}.select-shapes-cell.selected{background:#ff0}.select-shapes-controls{display:flex;justify-content:space-between}.select-shapes-button{padding:10px 20px;font-size:16px;background-color:#232b54;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s;color:#fff;font-weight:700}.select-shapes-button:hover{background-color:#1e264a}body{background:linear-gradient(180deg,#4358ad,#2c3e75);height:100vh;width:100vw;margin:0;padding:0;touch-action:none}.game-board{max-width:500px;margin:0 auto}.title{font-size:1.5em;padding:1rem;margin:0}.high-score{font-size:.6em;position:absolute;right:20px;top:20px}.score{font-size:2em}.grid{flex-direction:column;width:320px;margin:0 auto;background-color:#1e264a;border:4px solid #374b81;border-radius:5px}.grid,.row{display:flex;gap:0}.row{justify-content:center;align-items:center}.cell{border-top:2px solid #1e264a;border-left:2px solid #1e264a;height:40px;width:40px;transition:background-color .3s;background-color:#232b54}.cell:last-child{border-right:2px solid #1e264a}.filled-cell{border-radius:1px;transition:transform .2s;box-shadow:inset 0 -.4rem .2rem rgba(0,0,0,.3),inset -.4rem 0 .2rem rgba(0,0,0,.2),inset 0 .4rem 1rem hsla(0,0%,100%,.4),inset .4rem 0 .2rem hsla(0,0%,100%,.1)}.shape-selection{display:flex;justify-content:center;width:400px;max-width:100%;margin:auto;padding-top:30px;gap:3em}.game-over-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10}.game-over-message{color:#fff;font-size:2em;font-weight:700;text-align:center}.restart-button{margin-top:20px;padding:10px 20px;font-size:1em;font-weight:700;color:#fff;background-color:#ff5722;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.restart-button:hover{background-color:#e64a19}.score-board{text-align:center;margin-bottom:20px;font-size:1.5em;font-weight:700}.score.highlight{animation:highlight 1s ease-in-out}@keyframes highlight{0%{transform:scale(1);color:#fff}50%{transform:scale(1.2);color:#ff0}to{transform:scale(1);color:#fff}}.hover-cell{background-color:hsla(0,0%,100%,.3);box-shadow:inset 0 -.2rem .2rem rgba(0,0,0,.3),inset -.2rem 0 .2rem rgba(0,0,0,.2),inset 0 .2rem 1rem hsla(0,0%,100%,.4),inset .2rem 0 .2rem hsla(0,0%,100%,.1)}.hover-x:before{content:"X";display:flex;justify-content:center;align-items:center;font-size:1.5rem;color:rgba(255,0,0,.7);width:100%;height:100%}.back-button{position:absolute;bottom:20px;left:20px;padding:10px 20px;font-size:16px;background-color:#232b54;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s;color:#fff;font-weight:700}.back-button:hover{background-color:#1e264a}.back-button:disabled{background-color:#ccc;cursor:not-allowed}.create-piece-button{position:absolute;bottom:20px;right:20px;padding:10px 20px;font-size:16px;background-color:#232b54;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s;color:#fff;font-weight:700}.create-piece-button:hover{background-color:#1e264a}.open-select-shapes-button{position:absolute;bottom:120px;right:20px;padding:10px 20px;font-size:16px;background-color:#232b54;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s;color:#fff;font-weight:700}.grid-container{position:relative}.score-animation{position:absolute;font-size:2rem;font-weight:700;color:green;animation:fadeOut 2s forwards}.score-text{font-size:1em;font-weight:700;color:#fff;text-shadow:2px solid #fff;border-radius:5px}@keyframes fadeOut{0%{opacity:1}to{opacity:0;transform:translateY(-20px)}}.github-badge{position:absolute;top:85px;left:25px;background-color:#24292e;color:#fff;padding:8px 12px;border-radius:5px;text-decoration:none;font-size:12px;font-weight:700;transition:background-color .3s ease;z-index:1000}.github-badge:hover{background-color:#0366d6}.github-icon path{fill:#fff}.gear-button{position:absolute;top:80px;right:20px;width:40px;height:40px;background-color:#232b54;border:none;border-radius:50%;cursor:pointer;transition:background-color .3s;color:#fff;font-weight:700;display:flex;justify-content:center;align-items:center}.gear-button:hover{background-color:#1e264a}.gear-button:before{content:"\2699";font-size:1.4rem;color:#fff}#app{font-family:Comic Sans MS,Comic Sans,cursive;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff}