:root {
    --bg-primary: #000;
    --bg-card: #10141B;
    --bg-table: hsl(0, 0%, 10%);
    --color-text: white;
    --color-muted: gray;
    --color-positive: greenyellow;
    --color-negative: red;
    --color-no-change: #555;

    --gradient-gold-cell: 135deg,
        hsl(48, 100%, 18%) 0%,
        hsl(51, 100%, 20%) 30%,
        hsl(48, 100%, 40%) 50%,
        hsl(51, 100%, 20%) 70%,
        hsl(44, 100%, 15%) 100%;

    --gradient-gold-row: 135deg,
        hsl(48, 100%, 18%) 0%,
        hsl(51, 100%, 20%) 10%,
        hsl(48, 100%, 35%) 50%,
        hsl(51, 100%, 20%) 70%,
        hsl(44, 100%, 15%) 100%;

    --gradient-silver-cell: 135deg,
        hsl(0, 0%, 26%) 0%,
        hsl(0, 0%, 44%) 30%,
        hsl(0, 0%, 54%) 50%,
        hsl(0, 0%, 44%) 70%,
        hsl(0, 0%, 22%) 100%;

    --gradient-silver-row: 135deg,
        hsl(0, 0%, 26%) 0%,
        hsl(0, 0%, 44%) 10%,
        hsl(0, 0%, 54%) 50%,
        hsl(0, 0%, 44%) 90%,
        hsl(0, 0%, 22%) 100%;

    --gradient-bronze-cell: 135deg,
        hsl(28, 58%, 10%) 0%,
        hsl(30, 61%, 20%) 30%,
        hsl(29, 73%, 37%) 50%,
        hsl(30, 61%, 20%) 70%,
        hsl(28, 68%, 2%) 100%;

    --gradient-bronze-row: 135deg,
        hsl(28, 58%, 0%) 0%,
        hsl(30, 61%, 10%) 10%,
        hsl(29, 73%, 27%) 50%,
        hsl(30, 61%, 10%) 90%,
        hsl(28, 68%, 0%) 100%;

    --gradient-grandmaster-cell: 135deg,
        hsl(226, 57%, 4%) 0%,
        hsl(216, 57%, 22%) 10%,
        hsl(206, 79%, 61%) 40%,
        hsl(206, 100%, 69%) 45%,
        hsl(206, 71%, 49%) 60%,
        hsl(217, 54%, 30%) 75%,
        hsl(222, 61%, 10%) 90%;

    --gradient-grandmaster-row: 135deg,
        hsl(226, 57%, 4%) 0%,
        hsl(216, 57%, 22%) 10%,
        hsl(206, 79%, 41%) 40%,
        hsl(206, 100%, 49%) 45%,
        hsl(206, 71%, 39%) 60%,
        hsl(217, 54%, 30%) 90%,
        hsl(222, 61%, 10%) 100%;
}

html, body {
    background-color: var(--bg-primary);
    color: var(--color-text);
    font-family: sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

a {
    color: var(--color-text);
}

hr {
    border-width: 0.2px;
    border-color: var(--color-muted);
}

.heading {
    color: var(--color-text);
    text-shadow: #5797f7 0px 0px 15px;
}

nav, header, footer, form {
    background-color: var(--bg-card);
    padding: 8px;
    border-radius: 0.5rem;
    line-height: 1.5rem;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav.sitenav li:not(:first-child)::before {
    display: inline;
    content: " · ";
}

nav.charnav ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, 80px);
    text-align: center;
    row-gap: 0.5rem;
}

nav.charnav ul li {
    text-wrap-mode: nowrap;
}

.gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(var(--gradient-gold-cell));
}

.gold-row { background: linear-gradient(var(--gradient-gold-row)); }
.silver { background: linear-gradient(var(--gradient-silver-cell)); }
.silver-row { background: linear-gradient(var(--gradient-silver-row)); }
.bronze { background: linear-gradient(var(--gradient-bronze-cell)); }
.bronze-row { background: linear-gradient(var(--gradient-bronze-row)); }
.grandmaster { background: linear-gradient(var(--gradient-grandmaster-cell)); }
.grandmaster-row { background: linear-gradient(var(--gradient-grandmaster-row)); }

.positive { color: var(--color-positive); font-weight: bold; }
.negative { color: var(--color-negative); font-weight: bold; }
.no-change { color: var(--color-no-change); font-weight: bold; }

.table-container { overflow-x: auto; }

table {
    text-align: center;
    width: 100%;
    background-color: var(--bg-table);
    border-radius: 8px;
    padding: 8px;
    white-space: nowrap;
}

tr { height: 30px; }

tr td:first-child { text-align: center; }

.cutoff { background-color: rgba(65, 156, 255, 0.1); }

#feedback-link {
    text-decoration: underline;
}

dialog {
    &::backdrop {
        background-color: rgba(0, 0, 0, 0.7);
    }
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--color-text);

    textarea {
        width: 100%;
        resize: none;
        background-color: var(--bg-table);
        color: var(--color-text);
    }

    form > * {
        margin-top: 8px;
    }

    #submit {
        padding: 8px;
        margin-top: 1rem;
        &:disabled {
            background-color: rgba(65, 156, 255, 0.3);
            cursor: not-allowed;
        }
    }

    #username {
        display: none;
        width: calc(100% - 16px);
        &.show {
            display: block;
        }
        padding: 8px;
    }

    .form-control {
        display: flex;
        justify-content: flex-end;
        margin-top: 0;
    }

    #close-dialog {
        background-color: transparent;
        padding: 8px;
        cursor: pointer;
        border-radius: 50%;
        display: block;
        color: var(--color-text);
        border: none;
        outline: none;
        font-size: 2rem;
    }
}