*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-family-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: "JetBrains Mono", "Courier New", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--z-base: 0;--z-dropdown: 10;--z-sticky: 20;--z-overlay: 30;--z-modal: 40;--z-popover: 50;--z-tooltip: 60;--z-notification: 70}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-family-main);line-height:1.6;color:var(--color-text);background-color:var(--color-background);min-height:100vh;overflow-x:hidden}#app{min-height:100vh;display:flex;flex-direction:column;position:relative}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.loading{position:relative;pointer-events:none}.loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.3) 50%,transparent 75%);background-size:200% 100%;animation:shimmer 2s linear infinite}:focus{outline:none}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-md)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}::selection{background:var(--color-primary);color:#fff}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);-webkit-user-select:none;user-select:none}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-border-hover)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}[data-theme=light]{--color-primary: #6366f1;--color-primary-hover: #5558e3;--color-primary-light: #e0e7ff;--color-secondary: #8b5cf6;--color-secondary-hover: #7c3aed;--color-background: #ffffff;--color-background-secondary: #f9fafb;--color-surface: #f3f4f6;--color-surface-hover: #e5e7eb;--color-text: #111827;--color-text-secondary: #6b7280;--color-text-tertiary: #9ca3af;--color-border: #e5e7eb;--color-border-hover: #d1d5db;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-tile-1: #ef4444;--color-tile-2: #f59e0b;--color-tile-3: #10b981;--color-tile-4: #3b82f6;--color-tile-5: #8b5cf6;--color-tile-6: #ec4899;--color-tile-7: #06b6d4;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--gradient-background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)}[data-theme=dark]{--color-primary: #818cf8;--color-primary-hover: #6366f1;--color-primary-light: #312e81;--color-secondary: #a78bfa;--color-secondary-hover: #8b5cf6;--color-background: #0f0f23;--color-background-secondary: #1a1a2e;--color-surface: #16213e;--color-surface-hover: #1e3a5f;--color-text: #f9fafb;--color-text-secondary: #d1d5db;--color-text-tertiary: #9ca3af;--color-border: #374151;--color-border-hover: #4b5563;--color-success: #34d399;--color-warning: #fbbf24;--color-error: #f87171;--color-info: #60a5fa;--color-tile-1: #f87171;--color-tile-2: #fbbf24;--color-tile-3: #34d399;--color-tile-4: #60a5fa;--color-tile-5: #a78bfa;--color-tile-6: #f472b6;--color-tile-7: #22d3ee;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--gradient-background: linear-gradient(135deg, #1a1a2e 0%, #0f0f23 100%)}@media (prefers-color-scheme: dark){[data-theme=auto]{--color-primary: #818cf8;--color-primary-hover: #6366f1;--color-primary-light: #312e81;--color-secondary: #a78bfa;--color-secondary-hover: #8b5cf6;--color-background: #0f0f23;--color-background-secondary: #1a1a2e;--color-surface: #16213e;--color-surface-hover: #1e3a5f;--color-text: #f9fafb;--color-text-secondary: #d1d5db;--color-text-tertiary: #9ca3af;--color-border: #374151;--color-border-hover: #4b5563;--color-success: #34d399;--color-warning: #fbbf24;--color-error: #f87171;--color-info: #60a5fa;--color-tile-1: #f87171;--color-tile-2: #fbbf24;--color-tile-3: #34d399;--color-tile-4: #60a5fa;--color-tile-5: #a78bfa;--color-tile-6: #f472b6;--color-tile-7: #22d3ee;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--gradient-background: linear-gradient(135deg, #1a1a2e 0%, #0f0f23 100%)}}@media (prefers-color-scheme: light){[data-theme=auto]{--color-primary: #6366f1;--color-primary-hover: #5558e3;--color-primary-light: #e0e7ff;--color-secondary: #8b5cf6;--color-secondary-hover: #7c3aed;--color-background: #ffffff;--color-background-secondary: #f9fafb;--color-surface: #f3f4f6;--color-surface-hover: #e5e7eb;--color-text: #111827;--color-text-secondary: #6b7280;--color-text-tertiary: #9ca3af;--color-border: #e5e7eb;--color-border-hover: #d1d5db;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-tile-1: #ef4444;--color-tile-2: #f59e0b;--color-tile-3: #10b981;--color-tile-4: #3b82f6;--color-tile-5: #8b5cf6;--color-tile-6: #ec4899;--color-tile-7: #06b6d4;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--gradient-background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)}}*{transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base)}.start-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--gradient-background);padding:var(--spacing-xl)}.start-screen-content{max-width:600px;width:100%;text-align:center;animation:slideInUp .6s ease-out}.logo-container{margin-bottom:var(--spacing-2xl)}.game-title{font-size:5rem;font-weight:900;margin-bottom:var(--spacing-sm);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 60px rgba(99,102,241,.3)}.title-2{font-size:6rem;display:inline-block;animation:pulse 2s ease-in-out infinite}.tagline{font-size:1.5rem;color:var(--color-primary);margin-bottom:var(--spacing-xs);font-weight:600}.author{color:var(--color-text-secondary);font-size:1rem}.version-info{margin-bottom:var(--spacing-xl);font-family:var(--font-family-mono);font-size:.875rem;color:var(--color-text-tertiary)}.menu-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-2xl);align-items:center}.btn-large{font-size:1.25rem;padding:var(--spacing-md) var(--spacing-2xl);min-width:200px}.features-list{text-align:left;background:var(--color-surface);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.features-list h3{color:var(--color-primary);margin-bottom:var(--spacing-md);text-align:center}.features-list ul{list-style:none;padding:0}.features-list li{padding:var(--spacing-xs) 0;color:var(--color-text)}.game-screen{min-height:100vh;display:flex;flex-direction:column;background:var(--color-background)}.game-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.game-info{display:flex;gap:var(--spacing-lg);font-family:var(--font-family-mono)}.game-board-container{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}#game-canvas{border:2px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background:var(--color-surface)}.color-palette{display:flex;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--color-surface);border-top:1px solid var(--color-border)}.game-controls{display:flex;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-background-secondary)}.color-button{width:60px;height:60px;border:3px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.color-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.color-button.selected{border-color:var(--color-text);transform:scale(1.1);box-shadow:var(--shadow-xl)}.game-message{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-over-content{background:var(--color-surface);padding:var(--spacing-2xl);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-2xl);animation:slideInUp .3s ease-out}.game-over-content h2{font-size:2.5rem;margin-bottom:var(--spacing-lg);color:var(--color-primary)}.game-over-content p{font-size:1.5rem;margin-bottom:var(--spacing-xl);color:var(--color-text)}.settings-screen{min-height:100vh;background:var(--color-background)}.settings-header{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.settings-header h2{font-size:1.5rem;color:var(--color-text)}.settings-content{max-width:600px;margin:0 auto;padding:var(--spacing-xl)}.settings-group{margin-bottom:var(--spacing-xl)}.settings-group h3{color:var(--color-primary);margin-bottom:var(--spacing-md)}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);cursor:pointer;transition:background var(--transition-fast)}.setting-item:hover{background:var(--color-surface-hover)}.setting-item select,.setting-item input[type=checkbox]{cursor:pointer}@media (max-width: 768px){.game-title{font-size:3rem}.title-2{font-size:4rem}.tagline{font-size:1.25rem}#game-canvas{max-width:100%;height:auto}}html,body{height:100%;overflow:hidden;position:fixed;width:100%}#app{height:100vh;width:100vw;overflow:hidden;display:flex;flex-direction:column}.game-screen{height:100vh;display:flex;flex-direction:column;overflow:hidden}.game-header{flex-shrink:0;padding:var(--spacing-sm)}.game-board-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--spacing-sm);min-height:0}#game-canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.color-palette{flex-shrink:0;display:flex;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.game-controls{flex-shrink:0;padding:var(--spacing-sm)}@media (max-width: 768px){.game-header{padding:var(--spacing-xs)}.game-info{font-size:.875rem;gap:var(--spacing-sm)}.color-button{width:50px;height:50px;flex-shrink:0}.game-controls{padding:var(--spacing-xs)}.game-controls button{font-size:.875rem;padding:var(--spacing-xs) var(--spacing-sm)}}@media (max-width: 768px){input[type=text],input[type=number],select,textarea{font-size:16px}}@media (max-height: 600px){.game-header{display:none}.color-palette{position:absolute;bottom:0;left:0;right:0;background:var(--color-surface);padding:var(--spacing-xs)}.game-controls{position:absolute;top:0;right:0;background:transparent}}@media all and (display-mode: standalone){.game-screen{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}.game-board-container canvas{display:block;margin:0 auto}.start-screen{height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.start-screen-content{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-md)}@media (max-height: 700px){.features-list{display:none}.game-title{font-size:3rem}.title-2{font-size:3.5rem}}.tutorial-screen{min-height:100vh;background:var(--color-background);display:flex;flex-direction:column}.tutorial-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.tutorial-progress{display:flex;gap:var(--spacing-sm)}.progress-dot{width:10px;height:10px;border-radius:50%;background:var(--color-border);transition:all var(--transition-fast)}.progress-dot.active{background:var(--color-primary);transform:scale(1.2)}.progress-dot.completed{background:var(--color-success)}.tutorial-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-xl);max-width:600px;margin:0 auto;width:100%}.tutorial-step{text-align:center;margin-bottom:var(--spacing-2xl)}.tutorial-icon{font-size:5rem;margin-bottom:var(--spacing-lg);animation:pulse 2s ease-in-out infinite}.tutorial-step h2{font-size:2rem;color:var(--color-primary);margin-bottom:var(--spacing-md)}.tutorial-step p{font-size:1.25rem;color:var(--color-text-secondary);line-height:1.6}.tutorial-navigation{display:flex;justify-content:space-between;gap:var(--spacing-md)}.tutorial-navigation button{min-width:120px}@media (max-width: 768px){.tutorial-content{padding:var(--spacing-lg)}.tutorial-step h2{font-size:1.5rem}.tutorial-step p{font-size:1rem}.tutorial-icon{font-size:4rem}}