@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Poppins', sans-serif;
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #1a1a2e, #16213e);
     color: white;
     padding: 20px;
 }

 .game-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 30px;
 }

 h1 {
     font-size: 3rem;
     margin-bottom: 10px;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
     letter-spacing: 2px;
 }

 h2 {
     font-size: 1.5rem;
     font-weight: 400;
     margin-bottom: 20px;
     color: #f5f5f5;
     opacity: 0.9;
 }

 .btn-container {
     position: relative;
     width: 450px;
     height: 450px;
     border-radius: 50%;
     background-color: #252b48;
     padding: 20px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 }

 .center-circle {
     position: absolute;
     width: 150px;
     height: 150px;
     background-color: #252b48;
     border-radius: 50%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
 }

 .level {
     font-size: 2.5rem;
     font-weight: bold;
     color: #f5f5f5;
 }

 .level-text {
     font-size: 0.9rem;
     color: #f5f5f5;
     opacity: 0.7;
 }

 .btn {
     border-radius: 0;
     border: none;
     margin: 0;
     cursor: pointer;
     transition: filter 0.2s ease;
     box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
 }

 .btn:hover {
     filter: brightness(1.2);
 }

 .btn:active {
     filter: brightness(1.5);
 }

 .red {
     background-color: #E63946;
     border-radius: 100% 0 0 0;
 }

 .green {
     background-color: #2A9D8F;
     border-radius: 0 100% 0 0;
 }

 .yellow {
     background-color: #F4A261;
     border-radius: 0 0 0 100%;
 }

 .blue {
     background-color: #457B9D;
     border-radius: 0 0 100% 0;
 }

 .gameflash {
     filter: brightness(1.75);
 }

 .userflash {
     filter: brightness(1.5);
 }

 .start-btn {
     background-color: #E63946;
     color: white;
     border: none;
     padding: 12px 30px;
     font-size: 1.2rem;
     border-radius: 30px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 600;
     box-shadow: 0 5px 15px rgba(230, 57, 70, 0.4);
 }

 .start-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(230, 57, 70, 0.6);
 }

 .start-btn:active {
     transform: translateY(-1px);
 }

 @media (max-width: 500px) {
     h1 {
         font-size: 2.2rem;
     }

     h2 {
         font-size: 1.2rem;
     }

     .btn-container {
         width: 300px;
         height: 300px;
         gap: 10px;
     }

     .center-circle {
         width: 100px;
         height: 100px;
     }

     .level {
         font-size: 2rem;
     }
 }