/* Reset and base styles */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body,
html {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: #f5f5f5;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, sans-serif;
   user-select: none;
   overflow: hidden;
}

/* Main container */
main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100dvh;
   width: 100dvw;
   position: relative;
}

/* Canvas styling */
canvas {
   width: 100%;
   height: 100%;
}

/* Mobile warning styles */
#mobile-warning {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   text-align: center;
   width: 80%;
   z-index: 1000;
}

#mobile-warning #warning-message {
   font-size: 1.2rem;
   font-weight: bold;
}

#mobile-warning #github-message {
   font-size: 1rem;
   margin-top: 1rem;
}

#mobile-warning #github-message a {
   color: #0366d6;
   text-decoration: none;
   transition: transform 0.2s ease, color 0.2s ease;
}

#mobile-warning #github-message a:active {
   color: #0056b3;
   text-decoration-line: underline;
   transform: scale(0.95);
}

#mobile-warning #credits {
   margin-top: 1rem;
   font-size: 0.8rem;
}

/* Show mobile warning and hide canvas on smaller screens */
@media (max-width: 768px) {
   #mobile-warning {
      display: block;
   }

   canvas {
      display: none;
   }
}

/* Animation for mobile warning */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translate(-50%, -60%);
   }
   to {
      opacity: 1;
      transform: translate(-50%, -50%);
   }
}

#mobile-warning {
   animation: fadeIn 0.3s ease-out forwards;
}