body { font-family: sans-serif; margin: 20px auto; padding: 0 5%;}
input, button { padding: 8px; margin: 5px; font-size: 16px; background-color: #e4f1dbb8;   border-radius: 5px;   border: 1px solid #643e1da1;}
button:hover {background-color: #cad0c5b8}
.hidden {display: none !important;}
.word { font-size: 2em; font-weight: bold; margin: 20px 0; text-align: center; }
.team { margin: 10px 0; }
.score { font-size: 1.2em; font-weight: bold; margin: 10px 0; }
.timer { font-size: 1.5em; color: #d9534f; margin: 10px 0; }
.winner { font-size: 2em; color: #28a745; text-align: center; margin: 20px 0; }
.violation-alert { background-color: #fff3cd; border: 1px solid #ffeaa7; padding: 10px; margin: 10px 0; border-radius: 5px; }
.violation-btn { background-color: #dc3545; color: white; border: none; padding: 5px 10px; margin: 5px; border-radius: 3px; cursor: pointer; }
.violation-btn.cancel { background-color: #6c757d; }
.word-history { margin: 5px; padding: 8px 12px; border-radius: 8px; display: inline-block;}
.word-correct { background-color: #d4edda; color: #155724;}
.word-skipped { background-color: #f8d7da; color: #721c24;}
.word-current { background-color: #fff3cd; color: #856404; font-weight: bold;}
.leaderbutton {font-size: 170%; border-radius: 5px; padding: 15px; border: 1px solid;}
.leaderbutton:hover {box-shadow: 0 0 5px rgba(0,0,0,0.5);}

.team-btn {border: none;border-radius: 10px;color: white;cursor: pointer;transition: transform 0.2s, box-shadow 0.2s;font-weight: bold;}
.team-btn:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.2);}
.team-btn:active {transform: translateY(0);}

/* Модальное окно */
.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center;align-items: center;z-index: 1000;}
.modal-content {background: white;padding: 20px;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);min-width: 50%;max-width: 90%;}
.setting-group {margin: 15px 0;}
.setting-group label {display: block;margin-bottom: 5px;font-weight: bold;}
.setting-group input {width: 98%;padding: 8px;border: 1px solid #ddd;border-radius: 4px;font-size: 16px;}
.modal-buttons {display: flex;justify-content: flex-end;gap: 10px;margin-top: 20px;}
.modal-buttons button.secondary {background-color: #d5935b; border-radius: 5px; border: 1px solid #643e1da1;}
.modal-buttons button.secondary:hover {background-color: #dfb998;}


/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
.modal-content {margin: 20px;width: calc(100% - 40px);}
}