*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}body{font-family:Microsoft JhengHei,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.header{text-align:center;color:#fff;margin-bottom:20px}.header h1{font-size:2.2em;text-shadow:2px 2px 4px rgba(0,0,0,.3);margin-bottom:10px}.game-container{max-width:1400px;margin:0 auto;background:#ffffffbf;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:20px;box-shadow:0 8px 32px #1f268726}.control-panel{background:#f8f9fa;padding:10px;border-radius:15px;margin-bottom:10px}.level-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:0}.level-btn{padding:12px 15px;border:3px solid #667eea;background:#fff;color:#667eea;font-size:1em;font-weight:700;border-radius:10px;cursor:pointer;transition:all .3s;text-align:center}.level-btn:hover,.level-btn.active{background:#667eea;color:#fff}.main-area{display:flex;gap:20px;margin-bottom:20px;min-height:650px}.triangle-pool{flex:0 0 250px;background:#e7f3ff;border-radius:15px;padding:15px;border:3px solid #0066cc}.triangle-pool h3{color:#06c;margin-bottom:10px;text-align:center;font-size:1em}.triangle-list-container{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.triangle-item{background:#fff;border:3px solid #667eea;border-radius:10px;padding:8px;cursor:pointer;transition:all .3s}.triangle-item:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0003}.triangle-item.selected{border-color:#28a745;background:#d4edda}.triangle-item.used{opacity:.3;pointer-events:none}.triangle-label{font-size:.9em;font-weight:700;color:#333;margin-bottom:5px;text-align:center}.triangle-preview{width:100%;height:60px}.workspace{flex:1;display:flex;flex-direction:column;background:#fff9e6;border-radius:15px;padding:12px;border:3px solid #ffc107;min-height:600px}.workspace h3{color:#856404;margin:0 0 8px;text-align:center;font-size:1em}.canvas-wrapper{position:relative;flex:1;width:100%;background:#fff;border-radius:10px;overflow:hidden;min-height:500px}.level4-formula{position:absolute;bottom:20px;left:20px;transform:none;background:#fffffff2;padding:10px 20px;border-radius:15px;box-shadow:0 4px 15px #00000026;border:2px solid #28a745;z-index:90;display:flex;align-items:center;gap:10px;font-size:1.2em;font-weight:700;color:#333;pointer-events:none}.l4-item{background:#f8f9fa;padding:5px 15px;border-radius:10px;border:1px solid #dee2e6}.l4-result{color:#fff;background:#28a745;padding:5px 20px;border-radius:20px}.l4-op{color:#888}.l4-div-2{font-size:1.6em;color:#d63384;font-weight:900}canvas{display:block}.canvas-wrapper.cutting-mode{cursor:crosshair}.tools-panel{background:#fffffff2;padding:8px 12px;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin-bottom:8px}.tools-panel h4{display:none}.tools-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}.tool-section{display:flex;align-items:center;gap:6px;background:#f8f9fa;padding:5px 10px;border-radius:6px;border:1px solid #e9ecef}.tool-section-title{font-size:.7em;color:#667eea;font-weight:700;white-space:nowrap;margin:0}.tool-btns,.rotate-btns{display:flex;gap:3px;align-items:center}.tool-btn{padding:4px 8px;background:#667eeae6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;font-size:.7em;transition:all .2s;white-space:nowrap}.tool-btn.active{background:#28a745;box-shadow:0 0 0 2px #28a7454d}.tool-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.tool-btn.danger{background:#dc3545}.tool-btn.danger:hover{background:#c82333}.tool-btn.warning{background:#ffc107;color:#333}.tool-btn.warning:hover{background:#e0a800}.rotate-btn{padding:4px 7px;background:#667eea;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;font-size:.7em;transition:all .2s}.rotate-btn:hover,.tool-btn:hover{background:#5568d3;transform:translateY(-1px)}.rotate-btn:active,.tool-btn:active{transform:translateY(0)}.rotate-btn:hover{background:#5568d3}.info-panel{background:#e7f3ff;padding:20px;border-radius:15px;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:1.1em}.info-label{color:#06c;font-weight:700}.info-value{color:#333;font-weight:700}.hint-box{background:#fff3cd;border-left:5px solid #ffc107;padding:15px;margin-bottom:20px;border-radius:5px}.hint-box h4{color:#856404;margin-bottom:10px;font-size:1.1em}.hint-box ul{margin-left:20px;color:#856404}.hint-box li{margin-bottom:5px}.status-bar{background:#d4edda;border:2px solid #28a745;padding:10px;border-radius:10px;margin-bottom:10px;text-align:center}.status-text{font-size:1em;color:#155724;font-weight:700}.status-bar.cutting{background:#fff3cd;border-color:#ffc107}.status-bar.cutting .status-text{color:#856404}.objects-list{background:#e7f3ff;border:2px solid #0066cc;padding:10px;border-radius:10px;margin-bottom:15px}.objects-list-title{font-size:.9em;color:#06c;font-weight:700;margin-bottom:8px}.objects-items{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.object-item{background:#fff;border:3px solid #667eea;border-radius:10px;padding:10px 20px;font-weight:700;color:#333;min-width:120px;text-align:center}.object-item.empty{border-style:dashed;color:#999}.object-item.parallelogram{background:#28a7451a;border-color:#28a745;color:#155724}.object-item.triangle{background:#667eea1a;border-color:#667eea;color:#4557b3}.object-item.triangle.red{background:#ff6b6b1a;border-color:#ff6b6b;color:#d63031}.object-item.obtuse{background:#ff98001a;border-color:#ff9800;color:#e65100}.feedback-message{position:absolute;top:20px;left:50%;transform:translate(-50%) translateY(-20px);padding:12px 24px;border-radius:25px;font-weight:700;font-size:1.1em;display:none;z-index:100;opacity:0;transition:all .3s ease;box-shadow:0 4px 15px #0003;pointer-events:none}.feedback-message.show{display:block;opacity:1;transform:translate(-50%) translateY(0)}.feedback-message.success{background:#d4eddaf2;color:#155724;border:2px solid #28a745;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.feedback-message.warning{background:#fff3cdf2;color:#856404;border:2px solid #ffc107;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.feedback-message.error{background:#f8d7daf2;color:#721c24;border:2px solid #dc3545;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.feedback-message.info{background:#d1ecf1f2;color:#0c5460;border:2px solid #17a2b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes pulse-ring{0%{box-shadow:0 0 #28a74566}70%{box-shadow:0 0 0 10px #28a74500}to{box-shadow:0 0 #28a74500}}.tool-btn.recommended{animation:pulse-ring 2s infinite;border-color:#28a745;background:#28a745e6!important;color:#fff!important}.progress-container{margin-bottom:20px;padding:0 10px}.progress-steps{display:flex;justify-content:space-between;position:relative;margin-bottom:15px}.progress-line{position:absolute;top:15px;left:0;width:100%;height:4px;background:#e9ecef;z-index:1}.progress-line-fill{position:absolute;top:15px;left:0;height:4px;background:#28a745;z-index:2;transition:width .3s ease}.step-item{position:relative;z-index:3;text-align:center;width:80px;cursor:pointer}.step-circle{width:34px;height:34px;background:#fff;border:3px solid #e9ecef;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6c757d;transition:all .3s ease}.step-item.active .step-circle{border-color:#28a745;background:#28a745;color:#fff;box-shadow:0 0 0 4px #28a74533;transform:scale(1.1)}.step-item.completed .step-circle{border-color:#28a745;background:#28a745;color:#fff}.step-label{font-size:.85em;color:#6c757d;font-weight:700;transition:color .3s}.step-item.active .step-label{color:#28a745}.instruction-banner{background:#e7f3ff;border-left:5px solid #0066cc;padding:15px 20px;border-radius:5px;margin-bottom:20px;display:flex;align-items:center;gap:15px;box-shadow:0 2px 5px #0000000d}.instruction-icon{font-size:1.5em}.instruction-text{color:#0056b3;font-weight:700;font-size:1.1em}.action-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.btn{padding:12px 30px;font-size:1.1em;border:none;border-radius:10px;cursor:pointer;font-weight:700;transition:all .3s}.btn-primary{background:#28a745;color:#fff}.btn-primary:hover{background:#218838}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#5a6268}.success-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:none;justify-content:center;align-items:center;z-index:1000}.success-overlay.show{display:flex}.success-box{background:#fff;padding:40px;border-radius:20px;text-align:center;max-width:500px;animation:popIn .5s ease-out}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.success-box h2{color:#28a745;font-size:2.5em;margin-bottom:20px}.formula-box{background:#d4edda;border:3px solid #28a745;padding:20px;border-radius:10px;margin:20px 0}.formula{font-size:1.5em;font-weight:700;color:#155724}@media (max-width: 1200px){.main-area{flex-direction:column;min-height:auto}.triangle-pool{flex:1}.tools-grid{flex-wrap:wrap}.workspace{min-height:500px}}@media (max-width: 768px){.tools-panel{padding:6px 8px}.tools-grid{gap:8px;flex-direction:column;align-items:stretch}.tool-section{padding:4px 8px;justify-content:space-between}.tool-section-title{font-size:.65em}.tool-btn,.rotate-btn{font-size:.65em;padding:4px 6px}.workspace{padding:10px;min-height:450px}.canvas-wrapper{min-height:400px}}.tutorial-arrow{position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:15px solid #ff0000;animation:flash-arrow 1.5s infinite;z-index:1000;pointer-events:none;transition:all .3s ease}@keyframes flash-arrow{0%,to{opacity:1;transform:translateY(0)}50%{opacity:.3;transform:translateY(-10px)}}.drawing-pad{position:absolute;bottom:15px;right:15px;background:#fffffff2;border:2px solid #667eea;border-radius:10px;box-shadow:0 4px 15px #00000026;z-index:80;overflow:hidden}.drawing-pad-header{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.85em;font-weight:700}.drawing-clear-btn{padding:3px 8px;background:#fff3;border:1px solid rgba(255,255,255,.4);border-radius:4px;color:#fff;font-size:.75em;cursor:pointer;transition:all .2s}.drawing-clear-btn:hover{background:#fff6}#drawingCanvas{background:#fefefe;cursor:crosshair;display:block}.drawing-pad-header{cursor:move}.drawing-pad-resize{position:absolute;bottom:0;right:0;width:20px;height:20px;background:linear-gradient(135deg,transparent 50%,#667eea 50%);cursor:nwse-resize;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}