@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap);body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--color-primary:#2c5530;--color-primary-light:#4a7c59;--color-secondary:#c8b88b;--color-accent:#8b4513;--color-background:#fafaf8;--color-surface:#fff;--color-text-primary:#2c2c2c;--color-text-secondary:#5a5a5a;--color-text-light:#8a8a8a;--color-border:#e5e5e0;--color-shadow:#00000014;--zone-start:#4a7c59;--zone-finish:#6b8cae;--zone-fail:#c67171;--zone-opacity:0.15;--zone-border-opacity:0.5;--font-primary:"Montserrat",-apple-system,BlinkMacSystemFont,sans-serif;--font-secondary:"Open Sans",-apple-system,BlinkMacSystemFont,sans-serif;--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-xl:24px;--transition-fast:150ms ease;--transition-normal:300ms ease;--transition-slow:500ms ease}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fafaf8;color:#2c2c2c;font-family:Open Sans,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-secondary);line-height:1.6}h1,h2,h3,h4,h5,h6{color:#2c2c2c;color:var(--color-text-primary);font-family:Montserrat,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-weight:500;line-height:1.2;margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}h1{font-size:2.5rem}h2{font-size:2rem;font-weight:400}h3{font-size:1.5rem;font-weight:500}p{color:#5a5a5a;color:var(--color-text-secondary);margin-bottom:1rem;margin-bottom:var(--spacing-sm)}button{border:none;border-radius:8px;border-radius:var(--radius-md);cursor:pointer;font-family:Montserrat,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:.875rem;font-weight:500;letter-spacing:.025em;padding:1rem 2rem;padding:var(--spacing-sm) var(--spacing-lg);text-transform:uppercase;transition:all .3s ease;transition:all var(--transition-normal)}button:hover{box-shadow:0 4px 12px #00000014;box-shadow:0 4px 12px var(--color-shadow);transform:translateY(-2px)}button:active{transform:translateY(0)}.btn-primary{background-color:#2c5530;background-color:var(--color-primary)}.btn-primary:hover{background-color:#4a7c59;background-color:var(--color-primary-light)}.btn-secondary{background-color:initial;border:2px solid #2c5530;border:2px solid var(--color-primary);color:#2c5530;color:var(--color-primary)}.btn-secondary:hover{background-color:#2c5530;background-color:var(--color-primary)}.card{background-color:#fff;background-color:var(--color-surface);border-radius:16px;border-radius:var(--radius-lg);box-shadow:0 2px 8px #00000014;box-shadow:0 2px 8px var(--color-shadow);padding:2rem;padding:var(--spacing-lg);transition:box-shadow .3s ease;transition:box-shadow var(--transition-normal)}.card:hover{box-shadow:0 8px 24px #00000014;box-shadow:0 8px 24px var(--color-shadow)}input,select,textarea{background-color:#fff;background-color:var(--color-surface);border:1px solid #e5e5e0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);font-family:Open Sans,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-secondary);font-size:1rem;padding:1rem 1.5rem;padding:var(--spacing-sm) var(--spacing-md);transition:all .15s ease;transition:all var(--transition-fast);width:100%}input:focus,select:focus,textarea:focus{border-color:#2c5530;border-color:var(--color-primary);box-shadow:0 0 0 3px #2c55301a;outline:none}.text-center{text-align:center}.text-muted{color:#8a8a8a;color:var(--color-text-light)}.mb-sm{margin-bottom:1rem;margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:2rem;margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:3rem;margin-bottom:var(--spacing-xl)}.mt-sm{margin-top:1rem;margin-top:var(--spacing-sm)}.mt-md{margin-top:1.5rem;margin-top:var(--spacing-md)}.mt-lg{margin-top:2rem;margin-top:var(--spacing-lg)}.mt-xl{margin-top:3rem;margin-top:var(--spacing-xl)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.fade-in{animation:fadeIn ease-out .5s ease;animation:fadeIn var(--transition-slow) ease-out}.slide-in{animation:slideIn ease-out .3s ease;animation:slideIn var(--transition-normal) ease-out}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background);color:var(--color-text-primary)}.App{align-items:center;background:linear-gradient(to bottom,var(--color-background),#f5f5f0);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:var(--spacing-lg)}.game-container{animation:fadeIn var(--transition-slow) ease-out;margin:0 auto;max-width:1400px;text-align:center;width:95%}h1{color:var(--color-primary);font-size:3.5rem;font-weight:300;letter-spacing:-.02em;margin-bottom:var(--spacing-xl)}h1.failed{animation:pulse .8s ease-in-out infinite;color:var(--zone-fail)}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.qr-scanner-container{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:0 8px 32px var(--color-shadow);display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:900px;min-height:500px;padding:var(--spacing-xl);width:85%}.qr-scanner-container h2{color:var(--color-primary);font-weight:400;margin-bottom:var(--spacing-lg)}.video-detection-container{display:flex;flex-direction:column;justify-content:center;margin:var(--spacing-md) auto;max-width:100%;min-height:85vh;padding:0 var(--spacing-md);position:relative;transition:all var(--transition-normal);width:98%}.game-wrapper.config-open .video-detection-container{padding-right:20px;width:calc(100% - 400px)}.loading{color:var(--color-text-secondary);font-size:1.1rem;margin:var(--spacing-lg) 0}.video-wrapper{background:var(--color-surface);box-shadow:0 12px 40px var(--color-shadow);overflow:hidden;position:relative}.video-wrapper,.webcam{border-radius:var(--radius-lg);display:block;max-width:100%;width:100%}.webcam{height:auto;min-height:600px;object-fit:cover}.detection-canvas{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.instructions{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:0 4px 16px var(--color-shadow);margin:var(--spacing-xl) auto;max-width:600px;padding:var(--spacing-xl);text-align:left}.instructions h3{color:var(--color-primary);font-weight:500;margin-bottom:var(--spacing-lg);text-align:center}.instructions ul{list-style:none}.instructions li{color:var(--color-text-secondary);line-height:1.8;padding:var(--spacing-sm) 0;padding-left:var(--spacing-lg);position:relative}.instructions li:before{color:var(--color-secondary);content:"•";font-size:1.5rem;left:0;line-height:1;position:absolute}.status-message{animation:fadeIn var(--transition-normal) ease-out;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 2px 8px var(--color-shadow);color:var(--color-primary);font-size:1.1rem;font-weight:500;margin-top:var(--spacing-md);padding:var(--spacing-md)}.status-message.success{border-left:4px solid var(--zone-start)}.status-message.warning{border-left:4px solid var(--color-secondary);color:var(--color-accent)}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.countdown{color:var(--color-text-secondary);font-size:1.1rem;margin-top:var(--spacing-lg)}.timer{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:0 4px 16px var(--color-shadow);display:inline-block;margin-bottom:var(--spacing-xl);padding:var(--spacing-md) var(--spacing-xl)}.timer h2{font-feature-settings:"tnum";color:var(--color-primary);font-size:2.5rem;font-variant-numeric:tabular-nums;font-weight:300;letter-spacing:.05em}.results-container{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:0 12px 40px var(--color-shadow);margin:0 auto;max-width:600px;padding:var(--spacing-xl)}.results{display:flex;flex-direction:column;gap:var(--spacing-lg);margin:var(--spacing-xl) 0}.result-item{background:var(--color-background);border-radius:var(--radius-md);padding:var(--spacing-lg);transition:transform var(--transition-fast)}.result-item:hover{transform:translateY(-2px)}.result-item h3{color:var(--color-text-light);font-size:.875rem;font-weight:500;letter-spacing:.1em;margin-bottom:var(--spacing-sm);text-transform:uppercase}.result-value{color:var(--color-text-primary);font-size:2rem;font-weight:300}.result-value.score{color:var(--color-primary);font-size:2.5rem;font-weight:400}.bonus-message{background:var(--color-secondary);border-radius:var(--radius-md);color:var(--color-surface);font-weight:500;margin:var(--spacing-md) 0;padding:var(--spacing-md);text-align:center}.restart-button{background:var(--color-primary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:1rem;font-weight:500;letter-spacing:.05em;margin-top:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-xl);text-transform:uppercase;transition:all var(--transition-normal)}.restart-button:hover{background:var(--color-primary-light);box-shadow:0 8px 24px var(--color-shadow);transform:translateY(-2px)}.restart-button:active{transform:translateY(0)}@media (max-width:768px){.timer h2,h1{font-size:2rem}.video-wrapper{max-width:100%}.results-container{padding:2rem}}.zone-config-panel{background:#14141ef2;border-radius:10px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:20px}.panel-header{border-bottom:1px solid #ffffff1a;margin-bottom:20px;padding-bottom:15px}.panel-header h2{color:#0f8;font-size:1.3rem}.mode-toggle{background:#333;border:none;border-radius:5px;color:#fff;font-weight:700;padding:8px 16px;transition:all .2s}.mode-toggle.active{background:#0f8;color:#000}.mode-toggle:hover{transform:scale(1.05)}.panel-tabs{gap:5px;margin-bottom:20px}.panel-tabs button{background:#ffffff1a;border-radius:5px;color:#fff9;padding:10px;transition:all .2s}.panel-tabs button:hover:not(:disabled){background:#fff3}.panel-tabs button.active{background:#0f8;color:#000;font-weight:700}.panel-tabs button:disabled{opacity:.3}.add-zone-buttons{gap:10px;margin-bottom:20px}.add-btn{border:none;border-radius:5px;font-weight:700;padding:10px;transition:all .2s}.add-btn.start{background:#00ff004d;border:1px solid #0f0;color:#0f0}.add-btn.finish{background:#0064ff4d;border:1px solid #0064ff;color:#0064ff}.add-btn.fail{background:#ff00004d;border:1px solid red;color:red}.add-btn:hover{filter:brightness(1.2);transform:scale(1.02)}.zones-list{margin-bottom:20px}.zones-list h3{color:#fff9;font-size:.9rem;margin-bottom:10px}.zone-item{background:#ffffff0d;border:1px solid #0000;border-radius:5px;margin-bottom:8px;padding:10px;transition:all .2s}.zone-item:hover{background:#ffffff1a}.zone-item.selected{background:#00ff881a;border-color:#0f8}.zone-item.start{border-left:3px solid #0f0}.zone-item.finish{border-left:3px solid #0064ff}.zone-item.fail{border-left:3px solid red}.zone-type-badge{background:#fff3;border-radius:3px;padding:2px 6px}.zone-name-input{border-bottom:1px solid #0000;color:#fff}.zone-name-input:focus{border-bottom-color:#0f8}.delete-btn,.visibility-btn{border:none;border-radius:3px;transition:all .2s}.visibility-btn{background:#ffffff1a;color:#fff}.delete-btn{background:#ff00004d;color:#f66}.delete-btn:hover{background:#ff000080}.zone-properties{background:#ffffff0d;border-radius:8px;margin-top:15px;padding:15px}.zone-properties h3{color:#0f8;font-size:.9rem;margin-bottom:15px}.property-grid label{color:#fffc;display:flex;font-size:.85rem;gap:10px}.property-grid input[type=range]{background:#fff3;flex:1 1}.property-grid input[type=range]::-webkit-slider-thumb{background:#0f8;height:14px;width:14px}.property-grid span{min-width:40px}.detection-tab h3{color:#0f8;font-size:1rem;margin-bottom:15px}.confidence-threshold,.detection-condition,.min-count{background:#ffffff0d;border-radius:5px;margin-bottom:15px;padding:10px}.confidence-threshold label,.detection-condition label,.min-count label{font-size:.85rem}.detection-condition select{font-size:.85rem}.detection-condition select,.min-count input[type=number]{background:#0000004d;border:1px solid #fff3;border-radius:5px;color:#fff;padding:8px}.quick-actions button{background:#ffffff1a;border:none;border-radius:3px;color:#fff}.quick-actions button:hover{background:#fff3}.keypoint-category{border:1px solid #ffffff1a;border-radius:5px;margin-bottom:10px}.category-header{background:#ffffff0d;font-size:.85rem;font-weight:700;gap:10px;padding:10px}.category-header:hover{background:#ffffff1a}.category-header.all-selected{background:#0f83}.keypoint-checkbox{border-radius:3px;gap:8px}.keypoint-checkbox:hover{background:#ffffff0d}.export-tab h3{color:#0f8;margin-bottom:20px}.export-section,.import-section,.reset-section{background:#ffffff0d;border-radius:5px;margin-bottom:20px;padding:15px}.export-btn{background:#0f8;border-radius:5px;color:#000;font-weight:700;padding:12px;transition:all .2s}.export-btn:hover{filter:brightness(1.1)}.import-section input[type=file]{border:1px dashed #ffffff4d;border-radius:5px;color:#fff;padding:10px}.reset-btn{background:#ff00004d;border:none;border-radius:5px;color:#f66;font-weight:700;padding:12px;transition:all .2s}.reset-btn:hover{background:#ff000080}.config-panel-overlay{max-height:calc(100vh - 80px);right:10px;top:60px}.debug-panel{background:#000c;border-radius:5px;bottom:10px;color:#0f8;font-family:monospace;font-size:12px;left:10px;padding:10px;z-index:100}.debug-panel div{margin:2px 0}.status-message{border-radius:10px;font-weight:700;margin-top:15px;padding:15px;text-align:center}.status-message.success{background:#0f83;border:1px solid #0f8;color:#0f8}.status-message.warning{background:#fc03;border:1px solid #fc0;color:#fc0}.zone-config-panel::-webkit-scrollbar-track{background:#ffffff0d}.zone-config-panel::-webkit-scrollbar-thumb{background:#fff3}.zone-config-panel::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.zone-config-panel{background:var(--color-surface);border-radius:var(--radius-lg);color:var(--color-text-primary);font-family:var(--font-secondary);max-height:80vh;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-lg);width:400px}.panel-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md)}.panel-header h2{color:var(--color-primary);font-size:1.5rem;font-weight:400;margin:0}.mode-toggle{background:#0000;border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary);cursor:pointer;font-size:.875rem;font-weight:500;letter-spacing:.05em;padding:var(--spacing-sm) var(--spacing-md);text-transform:uppercase;transition:all var(--transition-fast)}.mode-toggle.active{background:var(--color-primary);color:#fff}.mode-toggle:hover{box-shadow:0 2px 8px var(--color-shadow);transform:translateY(-1px)}.panel-tabs{border-bottom:1px solid var(--color-border);display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.panel-tabs button{background:#0000;border:none;border-bottom:2px solid #0000;border-radius:0;color:var(--color-text-secondary);cursor:pointer;flex:1 1;font-weight:500;padding:var(--spacing-sm);transition:all var(--transition-fast)}.panel-tabs button.active,.panel-tabs button:hover:not(:disabled){color:var(--color-primary)}.panel-tabs button.active{border-bottom-color:var(--color-primary)}.panel-tabs button:disabled{cursor:not-allowed;opacity:.5}.add-zone-buttons{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.add-btn{background:#0000;border:1px solid;border-radius:var(--radius-sm);cursor:pointer;flex:1 1;font-size:.875rem;font-weight:500;padding:var(--spacing-sm);transition:all var(--transition-fast)}.add-btn.start{border-color:var(--zone-start);color:var(--zone-start)}.add-btn.start:hover{background:var(--zone-start);color:#fff}.add-btn.finish{border-color:var(--zone-finish);color:var(--zone-finish)}.add-btn.finish:hover{background:var(--zone-finish);color:#fff}.add-btn.fail{border-color:var(--zone-fail);color:var(--zone-fail)}.add-btn.fail:hover{background:var(--zone-fail);color:#fff}.add-btn:hover{box-shadow:0 2px 8px var(--color-shadow);transform:translateY(-1px)}.zones-list{margin-bottom:var(--spacing-lg)}.zones-list h3{color:var(--color-text-secondary);font-size:1rem;font-weight:400;margin-bottom:var(--spacing-sm)}.zone-item{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;display:flex;justify-content:space-between;margin-bottom:var(--spacing-xs);padding:var(--spacing-sm);transition:all var(--transition-fast)}.zone-item:hover{border-color:var(--color-primary);transform:translateX(2px)}.zone-item.selected{background:var(--color-surface);border-color:var(--color-primary);box-shadow:0 2px 8px var(--color-shadow)}.zone-item.start{border-left:3px solid var(--zone-start)}.zone-item.finish{border-left:3px solid var(--zone-finish)}.zone-item.fail{border-left:3px solid var(--zone-fail)}.zone-info{align-items:center;display:flex;gap:10px}.zone-type-badge{background:var(--color-background);border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;letter-spacing:.05em;padding:2px 8px;text-transform:uppercase}.zone-name-input{background:#0000;border:none;border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-size:.9rem;padding:2px 5px;width:120px}.zone-name-input:focus{border-bottom-color:var(--color-primary);outline:none}.zone-actions{display:flex;gap:5px}.delete-btn,.visibility-btn{background:#0000;border:1px solid;border-radius:var(--radius-sm);cursor:pointer;font-size:.75rem;padding:4px 8px;transition:all var(--transition-fast)}.visibility-btn{border-color:var(--color-border);color:var(--color-text-secondary)}.visibility-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.delete-btn{border-color:var(--zone-fail);color:var(--zone-fail)}.delete-btn:hover{background:var(--zone-fail);color:#fff}.zone-properties{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);box-sizing:border-box;margin-right:var(--spacing-sm);margin-top:var(--spacing-md);padding:var(--spacing-md);width:calc(100% - var(--spacing-sm))}.zone-properties h3{color:var(--color-primary);font-size:1rem;font-weight:500;margin-bottom:var(--spacing-md)}.property-grid{display:flex;flex-direction:column;gap:12px;width:100%}.property-grid label{grid-gap:var(--spacing-sm);align-items:center;color:var(--color-text-secondary);display:grid;font-size:.875rem;gap:var(--spacing-sm);grid-template-columns:80px 1fr 50px;margin-bottom:var(--spacing-sm);width:100%}.property-grid input[type=range]{-webkit-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;cursor:pointer;height:4px;width:100%}.property-grid input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-primary);border:none;border-radius:50%;box-shadow:0 1px 4px var(--color-shadow);cursor:pointer;height:16px;margin-top:-6px;width:16px}.property-grid input[type=range]::-moz-range-thumb{background:var(--color-primary);border:none;border-radius:50%;box-shadow:0 1px 4px var(--color-shadow);cursor:pointer;height:16px;width:16px}.property-grid input[type=range]::-ms-thumb{background:var(--color-primary);border:none;border-radius:50%;box-shadow:0 1px 4px var(--color-shadow);cursor:pointer;height:16px;width:16px}.property-grid span{color:var(--color-text-primary);flex-shrink:0;font-family:monospace;font-size:.875rem;min-width:50px;text-align:right}.detection-tab h3{color:var(--color-primary);font-size:1.1rem;font-weight:500;margin-bottom:var(--spacing-md)}.confidence-threshold,.detection-condition,.min-count{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);padding:var(--spacing-md)}.confidence-threshold label,.detection-condition label,.min-count label{display:flex;flex-direction:column;font-size:.875rem;gap:8px}.detection-condition select{font-size:.875rem}.detection-condition select,.min-count input[type=number]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);padding:var(--spacing-sm)}.min-count input[type=number]{width:80px}.confidence-threshold label{align-items:center;flex-direction:row}.confidence-threshold input[type=range]{flex:1 1;margin:0 10px}.keypoints-selection{margin-top:20px}.keypoints-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.keypoints-header h4{font-size:.9rem;margin:0}.quick-actions{display:flex;gap:5px}.quick-actions button{background:#0000;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;font-size:.75rem;padding:4px 10px;transition:all var(--transition-fast)}.quick-actions button:hover{border-color:var(--color-primary);color:var(--color-primary)}.keypoint-category{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);overflow:hidden}.category-header{align-items:center;background:var(--color-background);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:var(--spacing-sm);padding:var(--spacing-sm);transition:all var(--transition-fast)}.category-header:hover{background:var(--color-surface)}.category-header.all-selected{background:var(--color-secondary);color:var(--color-surface)}.category-keypoints{grid-gap:5px;display:grid;gap:5px;grid-template-columns:1fr 1fr;padding:10px}.keypoint-checkbox{align-items:center;border-radius:var(--radius-sm);cursor:pointer;display:flex;font-size:.8rem;gap:var(--spacing-xs);padding:4px;transition:all var(--transition-fast)}.keypoint-checkbox:hover{background:var(--color-background)}.keypoint-checkbox input[type=checkbox]{cursor:pointer;height:14px;width:14px}.export-tab h3{color:var(--color-primary);font-weight:500;margin-bottom:var(--spacing-lg)}.export-section,.import-section,.reset-section{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.export-btn{background:var(--color-primary);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;letter-spacing:.05em;padding:var(--spacing-sm);text-transform:uppercase;transition:all var(--transition-fast);width:100%}.export-btn:hover{background:var(--color-primary-light);box-shadow:0 2px 8px var(--color-shadow);transform:translateY(-1px)}.import-section input[type=file]{border:1px dashed var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary)}.import-section input[type=file],.reset-btn{background:#0000;cursor:pointer;padding:var(--spacing-sm);width:100%}.reset-btn{border:1px solid var(--zone-fail);border-radius:var(--radius-sm);color:var(--zone-fail);font-size:.875rem;font-weight:500;text-transform:uppercase;transition:all var(--transition-fast)}.reset-btn:hover{background:var(--zone-fail);color:#fff;transform:translateY(-1px)}.zone-config-panel::-webkit-scrollbar{width:6px}.zone-config-panel::-webkit-scrollbar-track{background:var(--color-background)}.zone-config-panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.zone-config-panel::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}.game-wrapper{min-height:100vh;position:relative;width:100%}.config-toggle-btn{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 2px 8px var(--color-shadow);color:var(--color-primary);cursor:pointer;font-size:.875rem;font-weight:500;left:var(--spacing-lg);letter-spacing:.05em;padding:var(--spacing-sm) var(--spacing-lg);position:fixed;text-transform:uppercase;top:var(--spacing-lg);transition:all var(--transition-normal);z-index:1000}.config-toggle-btn:hover{background-color:var(--color-primary);box-shadow:0 4px 16px var(--color-shadow);color:#fff;transform:translateY(-2px)}.config-toggle-btn.active{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.config-toggle-btn.active:hover{background-color:var(--zone-fail);border-color:var(--zone-fail)}.config-panel-overlay{animation:slideInRight var(--transition-normal) ease-out;background:var(--color-surface);box-shadow:-8px 0 32px var(--color-shadow);height:100vh;overflow-y:auto;padding-top:var(--spacing-md);position:fixed;right:0;top:0;width:380px;z-index:999}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.debug-panel{background:var(--color-surface);border-radius:var(--radius-md);bottom:var(--spacing-md);box-shadow:0 2px 8px var(--color-shadow);color:var(--color-text-secondary);font-family:Monaco,Consolas,monospace;font-size:.75rem;left:var(--spacing-md);opacity:.8;padding:var(--spacing-md);position:fixed}.debug-panel div{margin:4px 0}p.subtitle{color:var(--color-text-secondary);font-size:1.25rem;font-weight:300;margin-bottom:var(--spacing-xl)}.zone-editor-polygon{height:100%;left:0;position:absolute;top:0;width:100%}.polygon-controls{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 2px 8px var(--color-shadow);display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md);pointer-events:auto;position:absolute;right:var(--spacing-md);top:var(--spacing-md);z-index:100}.btn-primary{background:var(--color-primary);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;padding:var(--spacing-sm) var(--spacing-lg);transition:all var(--transition-fast)}.btn-primary:hover{background:var(--color-primary-light);box-shadow:0 2px 8px var(--color-shadow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#0000;border:1px solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-accent);cursor:pointer;flex:1 1;font-size:.75rem;font-weight:500;padding:6px 10px;transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--color-accent);color:#fff}.btn-secondary:disabled{cursor:not-allowed;opacity:.4}.polygon-controls button{background:var(--color-primary);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast)}.polygon-controls button:hover:not(:disabled){background:var(--color-primary-light);transform:translateY(-1px)}.polygon-controls button:disabled{background:var(--color-border);color:var(--color-text-light);cursor:not-allowed}.polygon-controls button[onclick*=start]{background:var(--zone-start)}.polygon-controls button[onclick*=finish]{background:var(--zone-finish)}.polygon-controls button[onclick*=fail]{background:var(--zone-fail)}.performance-controls{background:var(--color-surface);border-radius:var(--radius-sm);bottom:var(--spacing-sm);box-shadow:0 2px 8px var(--color-shadow);color:var(--color-text-primary);display:flex;flex-direction:column;font-size:.875rem;gap:var(--spacing-xs);left:var(--spacing-sm);padding:var(--spacing-sm);position:fixed;z-index:1000}.polygon-point-count{color:var(--color-text-secondary);font-size:.875rem;margin-bottom:var(--spacing-xs);text-align:center}.polygon-action-buttons,.polygon-zone-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.polygon-help-text{color:var(--color-text-light);font-size:.75rem;margin-top:var(--spacing-xs);text-align:center}.zone-btn{background:#0000;border:1px solid;border-radius:var(--radius-sm);cursor:pointer;flex:1 1;font-size:.75rem;font-weight:500;padding:6px 10px;transition:all var(--transition-fast)}.zone-btn:disabled{cursor:not-allowed;opacity:.4}.zone-btn.start:not(:disabled){border-color:var(--zone-start);color:var(--zone-start)}.zone-btn.start:not(:disabled):hover{background:var(--zone-start);color:#fff}.zone-btn.finish:not(:disabled){border-color:var(--zone-finish);color:var(--zone-finish)}.zone-btn.finish:not(:disabled):hover{background:var(--zone-finish);color:#fff}.zone-btn.fail:not(:disabled){border-color:var(--zone-fail);color:var(--zone-fail)}.zone-btn.fail:not(:disabled):hover{background:var(--zone-fail);color:#fff}.btn-cancel{background:#0000;border:1px solid var(--zone-fail);border-radius:var(--radius-sm);color:var(--zone-fail);cursor:pointer;flex:1 1;font-size:.75rem;font-weight:500;padding:6px 10px;transition:all var(--transition-fast)}.btn-cancel:hover{background:var(--zone-fail);color:#fff}.performance-controls button{background:var(--color-primary);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:.75rem;font-weight:500;padding:4px 8px;transition:all var(--transition-fast)}.performance-controls button:hover{background:var(--color-primary-light)}.polygon-instructions{background:var(--color-surface);border-radius:var(--radius-md);bottom:var(--spacing-md);box-shadow:0 4px 16px var(--color-shadow);color:var(--color-text-primary);font-size:.875rem;left:50%;padding:var(--spacing-sm) var(--spacing-lg);position:absolute;transform:translateX(-50%)}@media (max-width:768px){.config-panel-overlay{width:100%}.config-toggle-btn{padding:var(--spacing-xs) var(--spacing-md);right:var(--spacing-sm);top:var(--spacing-sm)}}
/*# sourceMappingURL=main.e9a56924.css.map*/