@font-face {
    font-display: swap;
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/heebo-v21-latin-regular.woff2') format('woff2'),
        url('./fonts/heebo-v21-latin-regular.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/heebo-v21-latin-700.woff2') format('woff2'),
        url('./fonts/heebo-v21-latin-700.woff') format('woff');
}


:root {
    --clr-bg: #000;
    --clr-fg: #fff;
    --clr-transparent: hsla(0, 0%, 100%, 20%);

    --clr-bar: #ffffff;
    --clr-misses: #ff0000;

    --bar-height: 10px;
    --distance: 10px;

    --width-left: 0%;
    --width-right: 0%;

    --cs-margin-left: 0px;
    --cs-margin-right: 0px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

*::selection {
    background: var(--clr-fg);
    color: var(--clr-bg);
}

a {
    text-decoration: none;
}

body {
    color: var(--clr-fg);
    background: none;
    font-family: 'Heebo', sans-serif;
    margin: 0 auto;
    max-width: 1920px;
    font-size: 1.75rem;
}

.bar {
    height: var(--bar-height);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
}

.bar-container {
    width: 100%;
    height: 100%;
    background-color: var(--clr-transparent);
    display: grid;
}

#bar-left {
    width: var(--width-left);
    height: 100%;
    background-color: var(--clr-bar);
    justify-self: end;
    transition: width 200ms;
}

#bar-right {
    width: var(--width-right);
    height: 100%;
    background-color: var(--clr-bar);
    transition: width 200ms;
}

.container {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.score {
    transition: font-size 200ms;
}

.leftPlayer {
    text-align: right;
}

.score .acc {
    font-weight: bold;
    font-size: 1.2em;
}

.stats {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8em;
}

.leftPlayer .stats {
    justify-content: flex-end;
}

.stats i {
    font-size: .8em;
}

.misses, .miss {
    color: var(--clr-misses);
}

.stats svg {
    max-height: 1em;
}

.stats svg path {
    fill: var(--clr-misses);
}

.spacing {
    display: block;
    height: 100%;
}

.players {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.player {
    position: absolute;
    top: calc(var(--distance) + var(--bar-height));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leftPlayerInfo,
.rightPlayerInfo {
    display: none;
    gap: 10px;
    font-size: 1.5rem;
}

.player.leftPlayerInfo {
    left: var(--distance);
}

.player.rightPlayerInfo {
    right: var(--distance);
    text-align: right;
    align-items: flex-end;
}

.scoresaber, .beatleader {
    display: none;
    gap: 10px;
}

.scoresaber {
    display: flex;
}

.player .playerName {
    font-size: 1.25em;
    font-weight: bold;
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player img {
    width: 100px;
    height: 100px;
}