body{text-align:center;color:#333;background-color:#f8f8f8;min-height:100vh;padding:20px;font-family:sans-serif;line-height:1.6}.container{max-width:1000px;margin:0 auto;padding:0 20px}.game-header{margin-bottom:30px;padding-top:10px}.game-header h1{color:#2f4f2f;margin-bottom:10px;font-size:2.5rem}.subtitle{color:#666;margin-bottom:20px;font-size:1.1rem}.game-main{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:30px;margin-bottom:30px;display:flex}.game-wrapper{flex-shrink:0;position:relative}#game-board{background:#fff;border:none;border-radius:8px;margin:0;display:block;box-shadow:0 2px 4px #0000001a}.tangram-piece{cursor:grab;-webkit-user-select:none;user-select:none;transition:filter .2s}.tangram-piece:hover{filter:brightness(1.05)}.tangram-piece.dragging{cursor:grabbing;opacity:.9}.game-instructions{background:#ffffffe6;border:1px solid #0000001a;border-radius:8px;max-width:300px;padding:20px}.game-instructions h3{color:#2f4f2f;margin-top:0;margin-bottom:15px;font-size:1.2rem}.game-instructions ul{text-align:left;color:#555;margin:0;padding-left:20px}.game-instructions li{margin-bottom:10px;line-height:1.5}.game-footer{margin-top:20px;padding-top:20px}.game-info p{color:#666;margin:0;font-size:.9rem}@media (max-width:768px){body{padding:10px}.container{padding:0 10px}.game-header h1{font-size:2rem}.game-main{flex-direction:column;align-items:center;gap:20px}#game-board{width:95vw;max-width:400px;height:95vw;max-height:400px}.game-instructions{width:100%;max-width:100%}}.game-controls{margin-top:15px}.control-btn{color:#fff;cursor:pointer;background-color:#4a6fa5;border:1px solid #385d8a;border-radius:4px;margin:5px;padding:8px 16px;font-size:.9rem}.control-btn:hover{background-color:#385d8a}.tangram-piece.correct{stroke:#4caf50;stroke-width:2px}#check-message{color:#fff;z-index:10001;background:#4caf50;border-radius:4px;padding:10px 20px;font-size:14px;position:fixed;top:20px;left:50%;transform:translate(-50%)}#check-message.info{background:#2f4f2f}.shape-selector{background:#ffffffe6;border-radius:8px;margin-bottom:15px;padding:15px}.shape-selector h3{color:#2f4f2f;margin-bottom:10px;font-size:1.1rem}.shape-buttons{gap:10px;display:flex}.shape-btn{color:#fff;cursor:pointer;background-color:#4a6fa5;border:1px solid #385d8a;border-radius:4px;flex:1;padding:8px 15px;font-size:.9rem}.shape-btn:hover{background-color:#385d8a}.shape-btn.active{background-color:#9acd32;border-color:#7cb029}.mode-toggle-btn{color:#fff;cursor:pointer;background-color:#4a6fa5;border:1px solid #385d8a;border-radius:4px;margin-top:10px;padding:8px 16px;font-size:.9rem}.mode-toggle-btn:hover{background-color:#385d8a}.hidden{display:none!important}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;height:100%}body{-webkit-font-smoothing:antialiased;min-height:100%;line-height:1.5}ul,ol{list-style:none}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;background:0 0;border:none;outline:none;padding:0}input,textarea,select{font:inherit;border:none;outline:none}img,picture,video,canvas,svg{max-width:100%;display:block}table{border-collapse:collapse;border-spacing:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}canvas{-webkit-tap-highlight-color:transparent;display:block}*{-webkit-tap-highlight-color:transparent}