@font-face {
    font-family: "Montserrat-Bold";
    src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format("truetype");
}

html,
body {
    background: linear-gradient(
        20deg,
        #1b223a 0 20%,
        #e84038 20% 40%,
        #f39200 40% 60%,
        #ffd300 60% 80%,
        #1b223a 80% 100%
    );
}

.bubble {
    padding: 20px;
    background-color: white;
    border-radius: 24px;
    box-shadow: 0 0 0px 0px #fbead6;
}

.bold {
    font-family: "Montserrat-Bold";
}

.player {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 3.2em; /* This ensures minimum height for 2 lines */
    justify-content: center;
    overflow: hidden;
}

/* Add this if you want empty lines to take up space */
.player div {
    min-height: 1.4em; /* Height for single line */
}

/* For single player teams */
.player.single-player .bold {
    line-height: 1.4em;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
}

/* For two player teams */
.player.two-players .bold {
    line-height: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flex {
    display: flex;
    align-items: center;
}

.flex-left {
    flex: 1;
    text-align: left;
    justify-content: center;
    min-height: 4em;
    padding-right: 5px;
}

.flex-right {
    flex: initial;
    text-align: right;
    justify-content: center;
}

.center {
    align-items: center;
}