.app-container{min-height:calc(100vh - 120px);padding:var(--spacing-xl) 0}.app-header{text-align:center;margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl);background:var(--bg-secondary);border-radius:var(--radius-xl)}.app-header h1{color:var(--text-primary);margin-bottom:var(--spacing-sm)}.app-header p{color:var(--text-secondary);font-size:1.125rem;margin-bottom:var(--spacing-lg)}.app-header .app-icon{font-size:4rem;display:block;margin-bottom:var(--spacing-md);transition:transform var(--transition-medium)}.app-header .app-icon:hover{transform:scale(1.1)}.app-content{max-width:var(--app-content-width);margin:0 auto}.app-nav{margin-top:var(--spacing-lg)}.app-nav-links{display:flex;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.app-nav-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);text-decoration:none;font-weight:500;transition:all var(--transition-fast);box-shadow:var(--shadow-light);cursor:pointer}.app-nav-link:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-medium)}.app-nav-link.hotkey-info-btn:hover{background:var(--secondary-color);border-color:var(--secondary-color)}.app-nav-link i{font-size:1rem}.app-nav-link span{font-size:.9rem}.control-group{display:flex;flex-direction:column;margin-bottom:var(--spacing-md)}.control-group label{font-weight:500;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.date-input,.datetime-input,.email-input,.number-input,.password-input,.search-input,.select-input,.tel-input,.text-input,.textarea-input,.time-input,.url-input,input[type=date],input[type=datetime-local],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;background:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.date-input:focus,.datetime-input:focus,.email-input:focus,.number-input:focus,.password-input:focus,.search-input:focus,.select-input:focus,.tel-input:focus,.text-input:focus,.textarea-input:focus,.time-input:focus,.url-input:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.date-input[readonly],.datetime-input[readonly],.email-input[readonly],.number-input[readonly],.password-input[readonly],.search-input[readonly],.select-input[readonly],.tel-input[readonly],.text-input[readonly],.textarea-input[readonly],.time-input[readonly],.url-input[readonly],input[type=date][readonly],input[type=datetime-local][readonly],input[type=email][readonly],input[type=number][readonly],input[type=password][readonly],input[type=search][readonly],input[type=tel][readonly],input[type=text][readonly],input[type=time][readonly],input[type=url][readonly],select[readonly],textarea[readonly]{background:var(--bg-tertiary);color:var(--text-secondary);cursor:not-allowed}.date-input:disabled,.datetime-input:disabled,.email-input:disabled,.number-input:disabled,.password-input:disabled,.search-input:disabled,.select-input:disabled,.tel-input:disabled,.text-input:disabled,.textarea-input:disabled,.time-input:disabled,.url-input:disabled,input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=email]:disabled,input[type=number]:disabled,input[type=password]:disabled,input[type=search]:disabled,input[type=tel]:disabled,input[type=text]:disabled,input[type=time]:disabled,input[type=url]:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}.textarea-input,textarea{resize:vertical;min-height:100px}.range-input,input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:var(--bg-tertiary);outline:0;margin:var(--spacing-sm) 0;cursor:pointer;transition:background var(--transition-fast)}.range-input:hover,input[type=range]:hover{background:var(--border-color)}.range-input::-webkit-slider-thumb,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:2px solid var(--bg-primary);box-shadow:0 2px 4px rgba(0,0,0,.2);transition:background var(--transition-fast),transform var(--transition-fast)}.range-input::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:hover{background:var(--secondary-color);transform:scale(1.1)}.range-input::-webkit-slider-thumb:active,input[type=range]::-webkit-slider-thumb:active{transform:scale(.95)}.range-input::-moz-range-thumb,input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:2px solid var(--bg-primary);box-shadow:0 2px 4px rgba(0,0,0,.2);transition:background var(--transition-fast),transform var(--transition-fast)}.range-input::-moz-range-thumb:hover,input[type=range]::-moz-range-thumb:hover{background:var(--secondary-color);transform:scale(1.1)}.range-input::-moz-range-thumb:active,input[type=range]::-moz-range-thumb:active{transform:scale(.95)}.range-input::-moz-range-track,input[type=range]::-moz-range-track{background:var(--bg-tertiary);border-radius:4px;height:8px}.range-input:disabled,input[type=range]:disabled{opacity:.5;cursor:not-allowed}.range-input:disabled::-webkit-slider-thumb,input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}.range-input:disabled::-moz-range-thumb,input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}.color-input,input[type=color]{width:60px;height:40px;padding:2px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);cursor:pointer;transition:border-color var(--transition-fast)}.color-input:hover,input[type=color]:hover{border-color:var(--primary-color)}.color-input:focus,input[type=color]:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.color-input:disabled,input[type=color]:disabled{opacity:.5;cursor:not-allowed}.checkbox-input,.radio-input,input[type=checkbox],input[type=radio]{margin-right:var(--spacing-sm);cursor:pointer}.checkbox-input:disabled,.radio-input:disabled,input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.controls-panel,.display-panel,.results-panel{background:var(--bg-primary)}.game-board{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.game-score{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}.game-controls{display:flex;gap:var(--spacing-md);justify-content:center;margin:var(--spacing-lg) 0}.clickable{cursor:pointer;user-select:none;transition:all var(--transition-fast)}.clickable:hover{transform:translateY(-1px)}.clickable:active{transform:translateY(0)}.draggable{cursor:grab;user-select:none}.draggable:active{cursor:grabbing}.status-indicator{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.875rem;font-weight:500}.status-indicator.success{background:#d1fae5;color:#065f46}.status-indicator.warning{background:#fef3c7;color:#92400e}.status-indicator.error{background:#fee2e2;color:#991b1b}.status-indicator.info{background:#dbeafe;color:#1e40af}.progress-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:var(--radius-sm);overflow:hidden}.progress-bar-fill{height:100%;background:var(--primary-color);transition:width var(--transition-medium);border-radius:var(--radius-sm)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);filter:saturate(.8);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-heavy);max-width:500px;width:90%;min-width:300px;max-height:80vh;min-height:200px;overflow-y:auto}.w-full{width:100%}.h-full{height:100%}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.select-none{user-select:none}.fade-in{animation:.3s ease-in-out fadeIn}.slide-in-up{animation:.3s ease-in-out slideInUp}.bounce-in{animation:.5s ease-in-out bounceIn}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%,20%,40%,60%,80%{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}100%{opacity:1;transform:scale3d(1,1,1)}}@media (max-width:768px){.app-container{padding:var(--spacing-md) 0}.app-header{padding:var(--spacing-lg)}.app-header .app-icon{font-size:3rem}.app-nav-links{gap:var(--spacing-sm)}.app-nav-link{padding:var(--spacing-sm);font-size:.9rem}.app-nav-link span{display:none}.app-nav-link i{font-size:1.1rem}.game-controls{flex-direction:column;align-items:center}.modal-content{margin:var(--spacing-md);width:calc(100% - 2rem)}}@media (max-width:480px){.app-header .app-icon{font-size:2.5rem}.game-score{flex-direction:column;gap:var(--spacing-sm);text-align:center}}