| /* Custom styles for the maze game */ | |
| #maze-container { | |
| aspect-ratio: 1/1; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| #maze-canvas { | |
| display: block; | |
| touch-action: none; | |
| } | |
| /* UFO animation */ | |
| @keyframes ufoFloat { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-5px); | |
| } | |
| } | |
| .ufo-float { | |
| animation: ufoFloat 2s ease-in-out infinite; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| #maze-container { | |
| max-width: 100%; | |
| } | |
| } | |
| /* Toggle switch styling */ | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #7C3AED; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #7C3AED; | |
| } | |