[theme~="dark"] {
    --lumo-base-color: hsl(130, 7%, 18%);
    --lumo-shade-5pct: hsla(0, 0%, 24%, 0.05);
    --lumo-shade-10pct: hsla(0, 0%, 24%, 0.1);
    --lumo-shade-20pct: hsla(0, 0%, 24%, 0.2);
    --lumo-shade-30pct: hsla(0, 0%, 24%, 0.3);
    --lumo-shade-40pct: hsla(0, 0%, 24%, 0.4);
    --lumo-shade-50pct: hsla(0, 0%, 24%, 0.5);
    --lumo-shade-60pct: hsla(0, 0%, 24%, 0.6);
    --lumo-shade-70pct: hsla(0, 0%, 24%, 0.7);
    --lumo-shade-80pct: hsla(0, 0%, 24%, 0.8);
    --lumo-shade-90pct: hsla(0, 0%, 24%, 0.9);
    --lumo-shade: hsl(130, 0%, 24%);
    --lumo-tint-5pct: hsla(130, 100%, 98%, 0.05);
    --lumo-tint-10pct: hsla(130, 100%, 98%, 0.1);
    --lumo-tint-20pct: hsla(130, 100%, 98%, 0.2);
    --lumo-tint-30pct: hsla(130, 100%, 98%, 0.3);
    --lumo-tint-40pct: hsla(130, 100%, 98%, 0.4);
    --lumo-tint-50pct: hsla(130, 100%, 98%, 0.5);
    --lumo-tint-60pct: hsla(130, 100%, 98%, 0.6);
    --lumo-tint-70pct: hsla(130, 100%, 98%, 0.7);
    --lumo-tint-80pct: hsla(130, 100%, 98%, 0.8);
    --lumo-tint-90pct: hsla(130, 100%, 98%, 0.9);
    --lumo-tint: hsl(130, 100%, 98%);
    --lumo-primary-color-50pct: hsla(130, 100%, 22%, 0.5);
    --lumo-primary-color-10pct: hsla(130, 100%, 22%, 0.1);
    --lumo-primary-color: hsl(130, 100%, 22%);
    --lumo-primary-text-color: hsl(130, 100%, 29%);
}

.map-background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.45);
    background-blend-mode: darken;
}

.erangel {
    background-image: url("https://raw.githubusercontent.com/pubg/api-assets/refs/heads/master/Assets/Maps/Erangel_Main_No_Text_Low_Res.png")
}

.miramar {
    background-image: url("https://raw.githubusercontent.com/pubg/api-assets/refs/heads/master/Assets/Maps/Miramar_Main_No_Text_Low_Res.png")
}

.taego {
    background-image: url("https://raw.githubusercontent.com/pubg/api-assets/refs/heads/master/Assets/Maps/Taego_Main_No_Text_Low_Res.png")
}

.rondo {
    background-image: url("https://raw.githubusercontent.com/pubg/api-assets/refs/heads/master/Assets/Maps/Rondo_Main_No_Text_Low_Res.png")
}

.vikendi {
    background-image: url("https://raw.githubusercontent.com/pubg/api-assets/refs/heads/master/Assets/Maps/Vikendi_Main_No_Text_Low_Res.png")
}

.deston {
    background-image: url("https://raw.githubusercontent.com/pubg/api-assets/refs/heads/master/Assets/Maps/Deston_Main_No_Text_Low_Res.png")
}

.map-background.unknown {
    background-color: rgba(0, 0, 0, 0.1);
}

.match-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    row-gap: 20px;
    column-gap: 20px;
}

.match-detail-grid > * {
    place-self: center;
}

/* Only draw line on first column of group */
vaadin-grid::part(header-row-start) {
    border-left: 1px solid var(--lumo-tint-10pct);
}