@font-face {
    font-family: 'Blizzard';
    src: url("../fonts/blizzard.2cbf84336b74.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Player colors for replay chat messages. */
:root {
    --player-color-red: #f40404;
    --player-color-blue: #0c48cc;
    --player-color-teal: #2cb494;
    --player-color-purple: #88409c;
    --player-color-orange: #f88c14;
    --player-color-brown: #703014;
    --player-color-white: #cce0d0;
    --player-color-yellow: #fcfc38;
    --player-color-green: #088008;
    --player-color-pale-yellow: #fcfc7c;
    --player-color-tan: #ecc4b0;
    --player-color-cerulean: #4068d4;
    --player-color-pale-green: #74a47c;
    --player-color-bluish-grey: #9090b8;
    --player-color-pink: #ffc4e4;
    --player-color-olive: #787800;
    --player-color-lime: #d2f53c;
    --player-color-navy: #0000e6;
    --player-color-magenta: #f032e6;
    --player-color-gray: #808080;
    --player-color-black: #3c3c3c;

    --bw-color-pale-blue: #b8b8e8;

    --player-color-text: var(--bw-color-pale-blue);
    --player-color-system: var(--player-color-yellow);
    --player-color-observer: var(--bw-color-pale-blue);
}

.bw-brighter {
    --player-color-red: #ff0505;
    --player-color-blue: #105eff;
    --player-color-teal: #39eac0;
    --player-color-purple: #b153cb;
    --player-color-orange: #ffb61a;
    --player-color-brown: #923e1a;
    --player-color-white: #ffffff;
    --player-color-yellow: #ffff49;
    --player-color-green: #0aa60a;
    --player-color-pale-yellow: #ffffa1;
    --player-color-tan: #ffffe5;
    --player-color-cerulean: #5387ff;
    --player-color-pale-green: #97d5a1;
    --player-color-bluish-grey: #bbbbef;
    --player-color-pink: #ffffff;
    --player-color-olive: #9c9c00;
    --player-color-lime: #ffff4e;
    --player-color-navy: #0000ff;
    --player-color-magenta: #ff41ff;
    --player-color-gray: #a6a6a6;
    --player-color-black: #4e4e4e;
    --bw-color-pale-blue: #efefff;

    --player-color-text: var(--bw-color-pale-blue);
    --player-color-system: var(--player-color-yellow);
    --player-color-observer: var(--bw-color-pale-blue);
}
.player_color_red {
    --player-color: var(--player-color-red);
}
.player_color_blue {
    --player-color: var(--player-color-blue);
}
.player_color_teal {
    --player-color: var(--player-color-teal);
}
.player_color_purple {
    --player-color: var(--player-color-purple);
}
.player_color_orange {
    --player-color: var(--player-color-orange);
}
.player_color_brown {
    --player-color: var(--player-color-brown);
}
.player_color_white {
    --player-color: var(--player-color-white);
}
.player_color_yellow {
    --player-color: var(--player-color-yellow);
}
.player_color_green {
    --player-color: var(--player-color-green);
}
.player_color_pale_yellow {
    --player-color: var(--player-color-pale-yellow);
}
.player_color_tan {
    --player-color: var(--player-color-tan);
}
.player_color_cerulean {
    --player-color: var(--player-color-cerulean);
}
.player_color_pale_green {
    --player-color: var(--player-color-pale-green);
}
.player_color_bluish_grey {
    --player-color: var(--player-color-bluish-grey);
}
.player_color_pink {
    --player-color: var(--player-color-pink);
}
.player_color_olive {
    --player-color: var(--player-color-olive);
}
.player_color_lime {
    --player-color: var(--player-color-lime);
}
.player_color_navy {
    --player-color: var(--player-color-navy);
}
.player_color_magenta {
    --player-color: var(--player-color-magenta);
}
.player_color_gray {
    --player-color: var(--player-color-gray);
}
.player_color_black {
    --player-color: var(--player-color-black);
}

.bw-color-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.4em;
    vertical-align: -0.35em;
    border-radius: 0.25em;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.18));
    background-color: var(--player-color);
}
.with-icons .bw-color-icon + .with-icons-text {
    align-self: baseline;
}