.game-canvas-container{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:0 auto}#game-canvas{border:3px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface);cursor:crosshair;max-width:100%;height:auto;box-shadow:0 4px 6px rgba(0,0,0,.1)}#game-canvas:active{cursor:pointer}.canvas-tools{display:flex;gap:2rem;align-items:center;justify-content:center;flex-wrap:wrap}.canvas-tools label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer;user-select:none}.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem}.pattern-card{border:2px solid var(--border-color);border-radius:var(--border-radius);padding:1rem;text-align:center;cursor:pointer;transition:.2s;background:var(--surface)}.pattern-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 8px rgba(59,130,246,.2)}.pattern-card:active{transform:translateY(0)}.pattern-preview{width:100%;height:100px;margin-bottom:.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background:var(--background)}.pattern-name{font-weight:600;color:var(--text);margin-bottom:.25rem}.pattern-description{font-size:.85rem;color:var(--text-secondary)}.rule-group{margin-bottom:1.5rem}.rule-group label:first-child{display:block;font-weight:600;margin-bottom:.5rem;color:var(--text)}.checkbox-group{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;background:var(--surface);border-radius:var(--border-radius);border:1px solid var(--border-color)}.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;font-size:1rem}.rule-checkbox{cursor:pointer;width:18px;height:18px}.rule-display{padding:1rem;background:var(--primary-alpha);border-radius:var(--border-radius);margin:1rem 0;text-align:center}.rule-display strong{color:var(--primary)}.rule-display span{font-family:'Courier New',monospace;font-size:1.2rem;font-weight:700;color:var(--text)}.preset-rules{margin-top:1.5rem}.preset-rules h4{margin-bottom:.75rem}.preset-rules .btn{margin:.25rem}.export-section,.import-section,.saved-configs-section{padding:1rem 0}.export-section h4,.import-section h4,.saved-configs-section h4{margin-bottom:.5rem;color:var(--text)}.export-section p,.import-section p,.saved-configs-section p{color:var(--text-secondary)}.flex.gap-sm{gap:.5rem}.saved-configs-list{margin-top:1rem;max-height:300px;overflow-y:auto}.config-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;margin-bottom:.5rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--border-radius);transition:.2s}.config-item:hover{border-color:var(--primary);background:var(--primary-alpha)}.config-name{font-weight:600;color:var(--text)}.config-actions{display:flex;gap:.5rem}.config-actions .btn{padding:.35rem .75rem;font-size:.85rem}.slider-container{display:flex;align-items:center;gap:1rem;margin-top:.5rem}.slider-container .range-input,.slider-container input[type=range]{flex:1}.slider-container span{min-width:80px;text-align:right;font-weight:600;color:var(--primary)}.control-group{margin-bottom:1rem}.control-group label:not(.checkbox-group label){display:block;font-weight:600;margin-bottom:.5rem;color:var(--text)}.instructions-list{list-style:none;padding-left:0}.instructions-list li{padding:.5rem 0 .5rem 1.5rem;position:relative}.instructions-list li::before{content:"▸";position:absolute;left:0;color:var(--primary);font-weight:700}.instructions-list strong{color:var(--primary)}@media (max-width:768px){.game-controls{flex-wrap:wrap;gap:.5rem}.game-controls .btn{flex:1 1 calc(50% - 0.25rem);min-width:0;font-size:.85rem}.pattern-grid{grid-template-columns:1fr}#game-canvas{max-width:100%;height:auto}.checkbox-group{gap:.5rem}.preset-rules .btn{font-size:.85rem;padding:.5rem .75rem}.config-item{flex-direction:column;align-items:flex-start;gap:.5rem}.config-actions{width:100%;justify-content:flex-end}}.tabs-container{border-bottom:2px solid var(--border-color);margin-bottom:0}.tabs{display:flex;gap:.5rem;padding:0 1rem;overflow-x:auto}.tab-button{padding:.75rem 1.5rem;background:0 0;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap;text-decoration:none;display:inline-block}.tab-button:hover{color:var(--text);background:var(--surface)}.tab-button.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-button i{margin-right:.5rem}.tab-content{display:none}.tab-content.active{display:block}.gif-progress{text-align:center;padding:2rem}.gif-progress-bar{width:100%;height:30px;background:var(--surface);border-radius:var(--border-radius);overflow:hidden;margin:1rem 0}.gif-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .3s;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.gif-settings{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.gif-settings .control-group{margin-bottom:0}