:root{--color-primary: #007bff;--color-primary-hover: #0056b3;--color-secondary: #6c757d;--color-secondary-hover: #545b62;--color-danger: #dc3545;--color-success: #28a745;--bg-body: #f0f2f5;--bg-container: white;--bg-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-section: #f8f9fa;--bg-button: #f9f9f9;--text-primary: #333;--text-secondary: #666;--text-light: white;--text-disabled: #6c757d;--border-primary: #333;--border-light: #ddd;--border-section: #e9ecef;--grid-cell-border: #e0e0e0;--grid-subgrid-border: #333;--grid-outer-border: #333;--shadow-container: 0 4px 20px rgba(0, 0, 0, .1);--shadow-canvas: 0 2px 10px rgba(0, 0, 0, .15);--radius-sm: min(1.11vw, 4px);--radius-md: min(1.67vw, 6px);--radius-lg: min(1.7vw, 12px);--border-width: max(1px, .56vw);--font-family: "Arial", sans-serif;--font-size-xs: min(1.94vw, .7rem);--font-size-sm: min(2.22vw, .8rem);--font-size-base: min(2.36vw, .85rem);--font-size-md: min(2.5vw, .9rem);--font-size-lg: min(2.78vw, 1rem);--font-size-xl: min(3.3vw, 1.2rem);--aspect-ratio: .514;--inverse-ratio: 1.944;--container-max-width: 450px;--container-max-height: 875px;--container-min-width: 320px;--container-min-height: 622px;--header-height: 7.35%;--info-top-height: 6%;--main-height: 42%;--toolbar-height: 8%;--input-height: 22%;--stats-height: 8%;--spacing-xs: min(.83vw, 3px);--spacing-sm: min(1.67vw, 6px);--spacing-md: min(2.22vw, 8px);--spacing-lg: min(2.78vw, 10px);--spacing-xl: min(2.8vw, 20px);--transition-fast: .2s ease;--transition-normal: .3s ease}*{box-sizing:border-box}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-body);min-height:100vh;display:flex;justify-content:center;align-items:center}h1,h2,h3,h4,h5,h6,p{margin:0}button{border:none;background:none;cursor:pointer;font-family:inherit}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.game-wrapper{width:min(100vw,100vh * var(--aspect-ratio));height:min(100vh,100vw * var(--inverse-ratio));max-width:var(--container-max-width);max-height:var(--container-max-height);min-width:var(--container-min-width);min-height:var(--container-min-height);padding:var(--spacing-xl);display:flex;justify-content:center;align-items:center}.game-container{width:94%;height:97%;display:flex;flex-direction:column;background:var(--bg-container);border-radius:var(--radius-lg);box-shadow:var(--shadow-container);overflow:hidden}.flex-container{display:flex}.flex-column{flex-direction:column}.flex-center{justify-content:center;align-items:center}.flex-between{justify-content:space-between}.flex-around{justify-content:space-around}.flex-shrink-0{flex-shrink:0}.text-center{text-align:center}@media (max-width: 480px){.game-wrapper{padding:min(2vw,16px)}}@media (max-width: 360px){.game-wrapper{padding:min(1.5vw,12px)}}.game-header{width:100%;height:var(--header-height);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-header);color:var(--text-light);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-sizing:border-box}.header-left{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.header-right{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}.game-title{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--text-light)}.header-btn{background:transparent;border:none;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}.header-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}.header-btn:active{transform:translateY(0);background:rgba(255,255,255,.15)}.header-icon{font-size:var(--font-size-lg);line-height:1;display:block}.back-btn .header-icon{font-size:var(--font-size-xl);font-weight:700}@media (max-width: 480px){.game-header{padding:var(--spacing-xs) var(--spacing-sm)}.game-title{font-size:var(--font-size-md)}.header-btn{min-width:32px;height:32px;padding:2px}.header-icon{font-size:var(--font-size-md)}.back-btn .header-icon{font-size:var(--font-size-lg)}}.game-info-top{width:100%;height:var(--info-top-height);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-container);border-bottom:1px solid var(--border-section);flex-shrink:0;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.game-info-top .info-item{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center}.game-info-top .info-item:first-child{align-items:flex-start;text-align:left}.game-info-top .info-item:last-child{align-items:flex-end;text-align:right}.game-info-top .info-label{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-xs);font-weight:500}.game-info-top .info-value{font-size:var(--font-size-md);color:var(--text-primary);font-weight:600}.timer-display{font-size:var(--font-size-lg);color:var(--text-primary);font-weight:700;font-family:Courier New,monospace;background:var(--bg-section);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid var(--border-light);min-width:60px;text-align:center}.difficulty-display{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.difficulty-text{font-size:var(--font-size-md);color:var(--color-primary);font-weight:600}.mistake-counter{font-size:var(--font-size-sm);color:var(--text-secondary);display:flex;align-items:center;gap:2px}.mistake-counter span{font-weight:600}#mistakeCount{color:var(--color-warning)}#maxMistakes{color:var(--text-secondary)}@media (max-width: 480px){.game-info-top{padding:var(--spacing-xs) var(--spacing-sm)}.timer-display{font-size:var(--font-size-md);padding:2px var(--spacing-xs);min-width:50px}}.game-main{width:100%;height:var(--main-height);display:flex;justify-content:center;align-items:center;padding:var(--spacing-lg);background:var(--bg-section);flex-shrink:0;box-sizing:border-box}#gameCanvas{width:88%;height:88%;border:var(--border-width) solid var(--border-section);border-radius:var(--radius-md);box-shadow:var(--shadow-canvas);background:var(--bg-container)}.game-toolbar{width:100%;height:var(--toolbar-height);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-container);border-top:1px solid var(--border-section);border-bottom:1px solid var(--border-section);flex-shrink:0;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm)}.toolbar-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-button);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--spacing-sm);cursor:pointer;transition:var(--transition-fast);position:relative;min-height:60px;font-family:var(--font-family)}.toolbar-btn:hover{background:var(--color-primary);border-color:var(--color-primary);transform:translateY(-1px);box-shadow:0 2px 8px #007bff33}.toolbar-btn:hover .toolbar-icon,.toolbar-btn:hover .toolbar-label,.toolbar-btn:hover .toolbar-counter,.toolbar-btn:hover .toolbar-status{color:var(--text-light)}.toolbar-btn:active{transform:translateY(0);box-shadow:0 1px 4px #007bff4d}.toolbar-btn:disabled{background:var(--bg-disabled, #f5f5f5);border-color:var(--border-disabled, #ddd);cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.toolbar-btn:disabled .toolbar-icon,.toolbar-btn:disabled .toolbar-label,.toolbar-btn:disabled .toolbar-counter,.toolbar-btn:disabled .toolbar-status{color:var(--text-disabled, #999)}.toolbar-icon{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs);line-height:1;display:block}.toolbar-label{font-size:var(--font-size-xs);font-weight:500;color:var(--text-primary);line-height:1;text-align:center}.toolbar-counter{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);background:var(--color-primary);color:var(--text-light);font-size:var(--font-size-xs);font-weight:700;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;line-height:1.2}.toolbar-status{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);font-size:8px;font-weight:700;color:var(--text-secondary);line-height:1;padding:1px 4px;border-radius:4px;background:var(--bg-section);border:1px solid var(--border-light)}.toolbar-btn[data-state=on]{background:var(--color-success);border-color:var(--color-success)}.toolbar-btn[data-state=on] .toolbar-icon,.toolbar-btn[data-state=on] .toolbar-label{color:var(--text-light)}.toolbar-btn[data-state=on] .toolbar-status{background:var(--color-success);color:var(--text-light);border-color:var(--color-success)}.toolbar-btn[data-state=on]:hover{background:var(--color-success);border-color:var(--color-success)}@media (max-width: 480px){.game-toolbar{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}.toolbar-btn{padding:var(--spacing-xs);min-height:50px}.toolbar-icon{font-size:var(--font-size-lg);margin-bottom:2px}.toolbar-label{font-size:10px}.toolbar-counter,.toolbar-status{font-size:9px;padding:1px 4px}}.game-controls{width:100%;height:var(--controls-height);padding:0;display:flex;justify-content:center;gap:var(--spacing-sm);background:var(--bg-section);border-top:1px solid var(--border-section);align-items:center;flex-shrink:0;box-sizing:border-box}.btn{width:29.5%;height:67%;font-size:var(--font-size-base);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal);font-weight:600}.btn-primary{background-color:var(--color-primary);color:var(--text-light)}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px)}.btn-secondary{background-color:var(--color-secondary);color:var(--text-light)}.btn-secondary:hover{background-color:var(--color-secondary-hover);transform:translateY(-1px)}.btn-secondary:disabled{background-color:var(--border-section);color:var(--text-disabled);cursor:not-allowed;opacity:.5}.game-input{width:100%;height:var(--input-height);padding:var(--spacing-lg);background:var(--bg-container);border-top:1px solid var(--border-section);flex-shrink:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}.number-pad-title{text-align:center;font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0;height:12.5%;line-height:12.5%}.number-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--spacing-xs);width:94%;height:35%;margin:0 auto}.number-btn{width:100%;height:100%;border:1px solid var(--border-light);border-radius:var(--radius-sm);background-color:var(--bg-button);cursor:pointer;transition:var(--transition-fast);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xs);box-sizing:border-box}.number-btn .number-value{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);line-height:1;margin-bottom:var(--spacing-xs)}.number-btn .number-count{font-size:var(--font-size-xs);font-weight:500;color:var(--text-secondary);line-height:1}.number-btn:disabled{background-color:var(--bg-disabled, #f5f5f5);border-color:var(--border-disabled, #ddd);cursor:not-allowed;opacity:.6}.number-btn:disabled .number-value{color:var(--text-disabled, #999)}.number-btn:disabled .number-count{color:var(--text-disabled, #999)}.number-btn:hover:not(:disabled){background-color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-1px)}.number-btn:hover:not(:disabled) .number-value,.number-btn:hover:not(:disabled) .number-count{color:var(--text-light)}.number-btn:active{transform:scale(.95)}.clear-btn{width:94%;height:17.5%;font-size:var(--font-size-md);font-weight:700;border:var(--border-width) solid var(--color-danger);border-radius:var(--radius-md);background-color:var(--bg-container);color:var(--color-danger);cursor:pointer;transition:var(--transition-fast);margin:0 auto}.clear-btn:hover{background-color:var(--color-danger);color:var(--text-light);transform:translateY(-1px)}.selection-info{text-align:center;font-size:var(--font-size-sm);color:var(--text-secondary);height:20%;line-height:20%;transition:var(--transition-normal);margin:0 auto;width:94%;display:flex;align-items:center;justify-content:center}.game-stats{width:100%;height:var(--stats-height);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);background:var(--bg-section);border-top:1px solid var(--border-section);align-items:center;box-sizing:border-box}.stats-row{display:flex;justify-content:space-around;width:100%;height:100%;align-items:center}.info-item{text-align:center;width:29.4%;height:100%;display:flex;flex-direction:column;justify-content:center}.info-label{font-size:var(--font-size-xs);color:var(--text-secondary);text-transform:uppercase;font-weight:600;margin:0;height:35%;line-height:35%;display:flex;align-items:center;justify-content:center}.info-value{font-size:var(--font-size-lg);font-weight:700;color:var(--text-primary);height:45%;margin:0;display:flex;align-items:center;justify-content:center}