: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;
}

a {
    color: white;
}

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

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

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

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

nav, header, footer a {
    color: var(--color-text);
}

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

nav ul li {
    display: inline;
}

nav ul li:not(:first-child)::before {
    content: " · ";
    display: inline-block;
    margin: 0 0.3rem;
}

main {
    display: grid;
    grid-template-columns: 8fr 4fr;
    column-gap: 16px;
}

section {
    background-color: var(--bg-card);
    padding: 8px;
    border-radius: 1rem 1rem 0 0;
}

.portrait {
    max-height: 700px;
}

.portrait-section {
    display: flex;
    justify-content: center;
}

.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 td:first-child {
    text-align: center;
}

.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;
}

.season-nav {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
}

.season-indicator {
    border: 1px solid white;
    padding: 4px 8px;
}

.disabled {
    color: #FFFFFF44;
}

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

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

.gm-numbers {
    background-color: var(--bg-table);
    padding: 8px;
    border-radius: 8px;
}

#crystals-remaining-input {
    padding: 8px 4px;
}

@media (max-width: 1200px) {
    main {
        display: block;
    }

    .portrait {
        max-height: 400px;
        max-width: 300px;
    }

    .portrait-section {
        border-radius: 0 0 8px 8px;
    }

    .main-table {
        border-radius: 8px 8px 0 0;
    }
}