*{box-sizing: border-box;margin: 0;padding: 0;} :root{--bg-gradient-start: #1a1a2e;--bg-gradient-end: #16213e;--text-color: #e0e0ff;--neon-green: #50fa7b;--neon-pink: #ff79c6;--light-purple: #bd93f9;--light-yellow: #f1fa8c;--dark-gray: #44475a;--medium-gray: #6272a4;--canvas-bg: #0f101a;--container-bg: rgba(40, 42, 54, 0.6);} body{background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color: var(--text-color);display: flex;flex-direction: column;min-height: 100vh;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .main-content{flex-grow: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px;width: 100%;} .game-container, .menu-container{background-color: var(--container-bg);padding: 30px;border-radius: 12px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);max-width: 650px;width: 95%;text-align: center;margin-top: 20px;margin-bottom: 20px;} h1{font-family: 'Orbitron', sans-serif;font-size: 2.8rem;margin-bottom: 30px;color: var(--text-color);text-shadow: 0 0 5px rgba(224, 224, 255, 0.3);} .geek{color: var(--neon-green);} .code{color: var(--neon-pink);} .button{display: inline-block;padding: 12px 25px;margin: 10px 5px;border: none;border-radius: 8px;font-size: 1rem;font-weight: bold;text-decoration: none;cursor: pointer;transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;text-align: center;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;} .mode-button{background-color: var(--medium-gray);color: var(--text-color);width: 80%;max-width: 300px;font-size: 1.2rem;} .mode-button:hover{background-color: var(--dark-gray);transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);} .control-button{background-color: var(--neon-green);color: var(--bg-gradient-start);padding: 10px 20px;min-width: 100px;} .control-button:hover{background-color: #45e06e;transform: translateY(-2px);box-shadow: 0 3px 6px rgba(80, 250, 123, 0.3);} .control-button.paused{background-color: var(--neon-pink);} .control-button.paused:hover{background-color: #f56ab6;box-shadow: 0 3px 6px rgba(255, 121, 198, 0.3);} #myCanvas{background-color: var(--canvas-bg);border: 1px solid var(--medium-gray);border-radius: 8px;max-width: 100%;height: auto;display: block;margin: 20px auto;} p{margin-bottom: 15px;line-height: 1.6;} a{color: var(--light-purple);text-decoration: none;transition: color 0.2s ease;} a:hover{color: var(--neon-pink);text-decoration: underline;} footer{flex-shrink: 0;padding: 20px 0;text-align: center;background-color: rgba(10, 10, 20, 0.2);border-top: 1px solid var(--dark-gray);width: 100%;margin-top: auto;} .footer-links a, .footer-links span{color: var(--medium-gray);margin: 0 8px;font-size: 0.9rem;} .footer-links a:hover{color: var(--light-purple);text-decoration: none;} .copyright{margin-top: 10px;font-size: 0.85rem;color: var(--medium-gray);} .copyright .geek, .footer-links .geek{color: var(--neon-green);font-weight: bold;} .copyright .code, .footer-links .code{color: var(--neon-pink);font-weight: bold;} @media (max-width: 768px){h1{font-size: 2.2rem;} .game-container, .menu-container{padding: 20px;} .button{padding: 10px 20px;font-size: 0.9rem;} .mode-button{font-size: 1rem;}} @media (max-width: 480px){body{} h1{font-size: 1.8rem;margin-bottom: 20px;} .game-container, .menu-container{padding: 15px;border-radius: 8px;} .button{padding: 9px 15px;font-size: 0.85rem;width: auto;} .mode-button{width: 90%;font-size: 0.95rem;} .control-button{min-width: 80px;} .footer-links{display: flex;flex-wrap: wrap;justify-content: center;font-size: 0.8rem;} .footer-links span{display: none;} .footer-links a{margin: 5px 10px;} .copyright{font-size: 0.75rem;}}