:root {
    --dark: #07221b;
    --secondary-dark: #00110d;
    --highlight: #DDDF29;
    --highlight-hover: #eef06c;
    --main: #2e8345;
    --main-gradient: linear-gradient(135deg, #2e8345 0%, #3a9f56 100%);
    --light: #e1ece4;
    --secondary-highlight: #78f78c;
    --inactive-bg: #021812;
    --inactive-text: #9ea8a1;
    --inactive-hover: #092D24;
    --warning-level2: #e44b28;
    --warning-gradient: linear-gradient(135deg, #e44b28 0%, #f05e3e 100%);
    --focus: #b7b92e;
    --card-bg: rgba(7, 34, 27, 0.8);
    --card-border: rgba(46, 131, 69, 0.3);
}

body {
    background-color: var(--dark);
    background-image: radial-gradient(circle at 10% 20%, rgba(46, 131, 69, 0.15) 0%, transparent 60%);
    color: var(--light);
}

a {
    color: var(--secondary-highlight);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--highlight);
}

p .highlight {
    color: var(--secondary-highlight);
}

.btn {
    background-color: var(--highlight);
    background-image: linear-gradient(135deg, var(--highlight) 0%, var(--highlight-hover) 60%);
    color: var(--dark);
    box-shadow: 0 4px 10px rgba(221, 223, 41, 0.3);
}

.btn:hover {
    background-color: var(--highlight-hover);
    box-shadow: 0 6px 15px rgba(221, 223, 41, 0.4);
}

.btn.inactive {
    background-color: var(--inactive-bg);
    background-image: none;
    color: var(--inactive-text);
    box-shadow: none;
}

.btn.inactive:hover {
    background-color: var(--inactive-hover);
}

#newGame {
    background-color: var(--warning-level2);
    background-image: var(--warning-gradient);
    color: var(--light);
    box-shadow: 0 4px 10px rgba(228, 75, 40, 0.3);
}

#newGame:hover {
    box-shadow: 0 6px 15px rgba(228, 75, 40, 0.4);
}

#guess-input:focus-visible {
    border-style: none;
    outline: none;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(183, 185, 46, 0.4);
}

#languagePicker[disabled] {
    background-color: var(--inactive-bg);
    opacity: 0.7;
}

#languagePicker:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(183, 185, 46, 0.4);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(4px);
}

.rest svg {
    color: var(--dark);
}

#popup {
    background: var(--main-gradient);
    border: 1px solid var(--secondary-highlight);
}

.correct-letter {
    background-color: var(--main);
    background-image: var(--main-gradient);
    color: var(--light);
    box-shadow: 0 4px 8px rgba(46, 131, 69, 0.25);
}

.wrong-letter {
    background-color: var(--warning-level2);
    background-image: var(--warning-gradient);
    color: var(--light);
    box-shadow: 0 4px 8px rgba(228, 75, 40, 0.25);
}

input[type="text"] {
    background-color: var(--secondary-dark);
    color: var(--light);
    border: 1px solid rgba(46, 131, 69, 0.3);
}

.icon-btn {
    background-color: var(--main);
    background-image: var(--main-gradient);
    color: var(--light);
}

.warning {
    background-color: var(--warning-level2);
    background-image: var(--warning-gradient);
    color: var(--light);
    border-left: 4px solid #c03518;
}

.mild {
    background-color: var(--highlight);
    background-image: linear-gradient(135deg, var(--highlight) 0%, var(--highlight-hover) 60%);
    color: var(--dark);
    border-left: 4px solid #b7b92e;
}

select {
    background-color: var(--main);
    background-image: var(--main-gradient);
    color: var(--light);
    border: 1px solid var(--secondary-highlight);
}

select:focus {
    box-shadow: 0 0 0 3px rgba(120, 247, 140, 0.3);
}

#score-value {
    color: var(--secondary-highlight);
}

.highscores {
    background-color: var(--light);
    background-image: linear-gradient(135deg, var(--light) 0%, #f0f7f2 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    color: var(--secondary-dark);
    border: 1px solid rgba(46, 131, 69, 0.1);
}

.highscores h2 {
    color: var(--secondary-dark);
    border-bottom: 2px solid rgba(46, 131, 69, 0.2);
    padding-bottom: 10px;
}

.list .player-name {
    color: var(--secondary-dark);
}

.list .score {
    color: var(--dark);
    background-color: rgba(46, 131, 69, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
}

.list li:nth-child(1) {
    background-color: rgba(234, 179, 8, 0.1);
}

.list li:nth-child(2) {
    background-color: rgba(156, 163, 175, 0.1);
}

.list li:nth-child(3) {
    background-color: rgba(180, 83, 9, 0.1);
}

footer {
    background-color: rgba(2, 24, 18, 0.6);
    margin-top: 40px;
    padding: 30px 0;
    backdrop-filter: blur(5px);
}

.infopanel .info {
    background-color: rgba(46, 131, 69, 0.2);
    border: 1px solid rgba(46, 131, 69, 0.3);
}

#score {
    background-color: rgba(46, 131, 69, 0.2);
    border: 1px solid rgba(46, 131, 69, 0.3);
}