body {

    font-family: Arial, sans-serif;

    margin: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background-color: #f4f4f4;

    padding: 10px;

}



.container {

    display: flex;

    flex-direction: column;

    gap: 20px;

    width: 100%;

    max-width: 800px;

}



.left-panel, .right-panel {

    background-color: #fff;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



.info-panel {

    background-color: #ffffcc;

    padding: 20px;

    border-radius: 10px;

    text-align: center;

}



.info-panel p {

    margin: 10px 0;

    font-size: 16px;

}



.info-panel p.bold {

    font-weight: bold;

}



button {

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

    margin: 10px;

    border: none;

    color: black;

}



.warning-light {

    width: 100px;

    height: 100px;

    background-color: #ffcccc;

    border-radius: 50%;

    margin: 20px auto;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    font-size: 14px;

    color: white;

    transition: background-color 0.3s;

}



.warning-light.active {

    background-color: #ff0000;

}



.warning-light.flashing {

    animation: flash 0.5s infinite;

}



@keyframes flash {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.5; }

}



#warningText {

    display: block;

    line-height: 1.2;

}



.valves {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 20px;

}



.valve {

    width: 80px;

    height: 80px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: bold;

    border: none;

    transition: background-color 0.3s, opacity 0.3s, color 0.3s;

    opacity: 0.3; /* Very dim */

    color: gray; /* Gray text */

}



.red {

    background-color: #ff6666; /* Dim red */

}



.yellow {

    background-color: #ffff66; /* Dim yellow */

}



.valve.pop-out {

    opacity: 1; /* Bright after pop-out */

    color: black; /* Black text after pop-out */

}



.valve.pop-out.red {

    background-color: #ff0000; /* Vibrant red */

}



.valve.pop-out.yellow {

    background-color: #ffff00; /* Vibrant yellow */

}



.valve.red.octagon {

    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

}



.valve.yellow.round {

    border-radius: 50%;

}



#resetButton {

    margin-top: 20px;

    background-color: #4CAF50;

    color: white;

}



#muteButton {

    margin-top: 10px;

    background-color: #555;

    color: white;

    font-size: 14px;

    padding: 8px 16px;

}



#brakePedal {

    margin-top: 20px;

    width: 100%;

    text-align: center;

}



.progress-bar {

    width: 100%;

    height: 20px;

    background-color: #ddd;

    border-radius: 10px;

    margin-top: 20px;

    overflow: hidden;

}



.pressure-bar {

    height: 100%;

    width: 100%;

    background-color: #4CAF50;

    transition: width 0.3s;

}



@keyframes bounce {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-10px); }

}



.valve.pop-out {

    animation: bounce 1s ease;

}



@media (max-width: 600px) {

    button {

        font-size: 18px;

        padding: 15px 25px;

    }



    .valves {

        flex-direction: row;

    }



    .info-panel p {

        font-size: 16px;

    }



    .container {

        flex-direction: column;

    }



    .left-panel, .right-panel {

        width: 100%;

    }

}



@media (orientation: landscape) {

    .container {

        flex-direction: row;

    }



    .left-panel, .right-panel {

        width: 50%;

    }

}