Wavetype's picture
There should only be one canvas window not 2 stacked on top of one another. Make buttons around the canvas perimeter for mobile app ergonomics
3635ed1 verified
/* Base styles */
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.dark ::-webkit-scrollbar-track {
background: #2d3748;
}
.dark ::-webkit-scrollbar-thumb {
background: #4a5568;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #718096;
}
/* Rally car animations */
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.rally-btn {
transition: all 0.2s ease;
font-weight: 800;
text-align: center;
min-width: 100px;
z-index: 10;
}
.rally-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#canvas-container {
touch-action: none;
}
@media (max-width: 640px) {
.rally-btn {
padding: 0.5rem;
min-width: 80px;
font-size: 0.8rem;
}
}