*{margin:0;padding:0;box-sizing:border-box}body{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background-color:#222;font-family:"Microsoft YaHei",sans-serif}.game-container{display:flex;flex-direction:column;gap:20px;padding:10px;background-color:transparent;width:100%;max-width:800px;position:relative;overflow:hidden}.game-board{width:100%;height:auto;background-color:transparent;position:relative;margin:0 auto;padding:0;margin-bottom:24vh}#gameCanvas{display:block;margin:0 auto;background-color:transparent}.game-board::-webkit-scrollbar,.game-board::-webkit-scrollbar-thumb,.game-board::-webkit-scrollbar-thumb:hover,.game-board::-webkit-scrollbar-track{display:none}.control-panel{position:fixed;bottom:0;left:0;right:0;z-index:100;background-color:#2c2c2c;padding-bottom:env(safe-area-inset-bottom,0)}.control-panel-content{display:grid;grid-template-columns:40px 1fr 40px;padding:min(8px,1.5vw);height:100%;align-items:center;max-width:800px;margin:0 auto;gap:min(8px,1.5vw)}.game-info{display:flex;justify-content:flex-end;align-items:center;height:100%;padding-right:5px}.game-controls{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.shapes-panel{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:4px;width:100%;height:min(160px,22vh);margin:0 auto}.shape-button{width:100%;height:100%;aspect-ratio:1;background-color:#2a2a2a;border:none;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;position:relative;min-width:min(24px,7vw);min-height:min(24px,7vw);overflow:hidden}.shape-button canvas{width:100%;height:100%;display:block}.shape{padding:5px;line-height:1;user-select:none}.shape-button.active-border{border:1px solid #fff!important;box-shadow:0 0 3px rgba(255,255,255,.2);opacity:1;transform:scale(1.02);z-index:1}.shape-button.selected{background:#444}.shape-button.correct{border:1px solid #0c4!important;opacity:.8}.shape-button.exists{border:1px solid orange!important;opacity:.8}.shape-button.selected.correct{border:1px solid #0f5!important;box-shadow:0 0 4px rgba(0,255,85,.3);opacity:1;transform:scale(1.02);z-index:1}.shape-button.selected.exists{border:1px solid #fc0!important;box-shadow:0 0 4px rgba(255,204,0,.3);opacity:1;transform:scale(1.02);z-index:1}.shape-button:hover{background:#333}.shape-button.disabled{opacity:.3;cursor:not-allowed;pointer-events:none;border-color:transparent;box-shadow:none}.shape-button.disabled.selected,.shape-button.disabled:hover{background:#2a2a2a;transform:none;border-color:transparent;box-shadow:none}.action-button{width:min(36px,9vw);height:min(36px,9vw);border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:min(20px, 5vw);color:#fff}.action-buttons{display:flex;flex-direction:column;gap:15px;justify-content:center;align-items:flex-start;height:100%;padding-left:5px}.help-button{background-color:orange}.cancel-button{background-color:#f44}.confirm-button{background-color:#0c4}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:1000;justify-content:center;align-items:center}.modal-content{background-color:#2c2c2c;padding:30px;border-radius:12px;text-align:center;max-width:90%;width:400px;color:#fff;box-shadow:0 0 20px rgba(0,0,0,.5)}.modal-content .message{margin:20px 0;white-space:pre-line;text-align:center;font-size:16px;line-height:1.5}.button-group{display:flex;gap:10px;justify-content:center;margin-top:20px}#restartBtn,.share-button{padding:12px 24px;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s ease;font-weight:700}#restartBtn{background-color:#4caf50;color:#fff}#restartBtn:hover{background-color:#45a049}.share-button{background-color:#2196f3;color:#fff}.share-button:hover{background-color:#1976d2}@media screen and (max-width:480px){.modal-content{padding:20px}.button-group{flex-direction:column}#restartBtn,.share-button{width:100%;padding:10px}}@media (min-width:768px){.game-container{padding:20px;max-width:800px}.control-panel-content{padding:15px;grid-template-columns:80px 1fr 80px}.shapes-panel{gap:5px;grid-template-columns:repeat(8,1fr)}.shape-button{width:50px;height:50px;font-size:60px}.action-button{width:55px;height:55px;font-size:28px}.game-info{padding-right:10px}.action-buttons{padding-left:10px}}.score-display{position:absolute;top:20px;right:20px;color:#fff;font-size:1.2em;text-align:right}.score-display div{margin:5px 0}.shape-button.historical{border:1px solid rgba(255,255,255,.2)!important}@media screen and (max-width:600px){.control-panel-content{grid-template-columns:36px 1fr 36px;padding:6px;gap:6px}.shapes-panel{gap:2px;padding:3px;height:min(170px,24vh)}.shape-button{min-width:min(22px,6vw);min-height:min(22px,6vw);border-radius:2px}.action-button{width:min(32px,8vw);height:min(32px,8vw);font-size:min(18px, 4.5vw)}.action-buttons,.game-info{padding:0 4px}.help-button{width:min(28px,7vw);height:min(28px,7vw);font-size:min(16px, 4vw)}.shape-button.active-border,.shape-button.correct,.shape-button.exists,.shape-button.historical,.shape-button.selected.correct,.shape-button.selected.exists{transform:none;box-shadow:none}}@media screen and (max-width:400px){.control-panel-content{grid-template-columns:32px 1fr 32px;padding:4px;gap:4px}.shapes-panel{gap:2px;padding:2px;height:min(160px,22vh)}.shape-button{min-width:min(26px,6.5vw);min-height:min(26px,6.5vw);border-radius:2px}.action-button{width:min(30px,7.5vw);height:min(30px,7.5vw);font-size:min(16px, 4vw)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.control-panel{padding-bottom:calc(env(safe-area-inset-bottom) + 4px)}}.help-content{text-align:left;max-height:70vh;overflow-y:auto;font-size:16px;line-height:1.6}.help-content ul{padding-left:20px;margin:15px 0;list-style-type:none}.help-content li{margin:12px 0;position:relative;padding-left:24px}.help-content li:before{content:"•";position:absolute;left:0;color:orange;font-size:20px;line-height:1}.help-content .example{margin-top:20px;padding:15px;background:rgba(76,175,80,.1);border-radius:8px;font-style:italic}.help-button{font-size:20px;font-weight:700;background-color:orange;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .3s}.help-button:hover{background-color:#ff8c00}#closeHelpBtn{background-color:orange;color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:16px;cursor:pointer;transition:background-color .3s}#closeHelpBtn:hover{background-color:#ff8c00}.modal-content h2{font-size:24px;margin-bottom:20px;text-align:center}