/* style.css */
body { font-family: sans-serif; background: #222; color: #fff; text-align: center; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
.hidden { display: none; }

button { cursor: pointer; margin: 10px; padding: 15px 25px; font-size: 1rem; border-radius: 5px; border: none; }

.btn-primary { background: #ff9800; color: #000; font-weight: bold; }
.btn-primary:hover { background: #e68900; }

.btn-selection { background: #444; color: #fff; width: 40%; }
.btn-selection:hover { background: #666; }

.btn-mode { display: block; width: 80%; margin: 10px auto; background: #00bcd4; color: #000; font-weight: bold; }
.btn-option { display: block; width: 100%; background: #333; color: white; text-align: left; }
.btn-option:hover { background: #555; }

.btn-back { background: #555; color: #ccc; padding: 10px 20px; }

.grid-container { display: flex; flex-wrap: wrap; justify-content: center; }
.btn-small {
    background: #444;
    color: #ccc;
    border: none;
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 15px;
}
.btn-small:hover {
    background: #d32f2f; /* Red warning color on hover */
    color: white;
}