:root {
    --thats-me-color: #409614;
}

.error-message {
    color: var(--pico-del-color);
}

.thats-me {
    color: var(--thats-me-color);
    font-weight: bold;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgb(78, 179, 27); }
    70% { box-shadow: 0 0 0 12px rgba(78, 179, 27, 0); }
    100% { box-shadow: 0 0 0 0 rgba(78, 179, 27, 0); }
}

button.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Tournament page */
#bracket-container {
    position: relative;
}
.match {
    display: flex;
    align-items: center;
    position: absolute;
    width: 250px;
    height: 80px;
    border-radius: 10px;
    padding: 3px 3px 3px 10px;
}

.match table {
    margin: 2px;
}

.match td {
    padding: initial;
    border: initial;
    background-color: transparent;
}

.match td.playername {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match td.winner {
    font-weight: bold;
}

span.invalid-score {
    font-size: 0.8em;
}

.match.elimination-round td.winner::before {
    content: "➡️ ";
}

.match.final-round td.winner::before {
    content: "🏆 ";
}

.match td.score {
    white-space: nowrap;
    text-align: right;
}

span.total-score {
    font-weight: bold;
}

.match.pre_created {
    border: 5px dashed #939393
}

.match.in_progress {
    animation: pulse 2s ease-in-out infinite;
    cursor: pointer;
    background-color: #4EB31B;
}

.match.finished {
    background-color: #aeaeae;
    cursor: pointer;
}