:root {
    --bg-dark: #121212;
    --bg-mid: #1e1e1e;
    --bg-light: #2a2a2a;
    --text-primary: #e6e0d4;
    --text-secondary: #b8b2a6;
    --text-muted: #8a857a;
    --accent-gold: #c9a34e;
    --color-attack: #b11226;
    --color-range: #3b5aa3;
    --color-defense: #6b4e2e;
    --color-health: #336b33;
    --card-background: #e0d3a8;
    font-size: clamp(8pt, 1vw, 16pt);
}

.light-mode {
    --text-primary: #121212;
    --text-secondary: #1e1e1e;
    --text-muted: #2a2a2a;
    --bg-dark: #e6e0d4;
    --bg-mid: #b8b2a6;
    --bg-light: #8a857a;
    --accent-gold: #c9a34e;
    --color-attack: #b11226;
    --color-range: #3b5aa3;
    --color-defense: #6b4e2e;
    --color-health: #336b33;
    --card-background: #1e1e1e;
    font-size: clamp(8pt, 1vw, 16pt);
}

.high-contrast-mode {
    --bg-dark: #090909;
    --bg-mid: #0F0F0F;
    --bg-light: #151515;
    --text-primary: #f2ecdf;
    --text-secondary: #dbd4c5;
    --text-muted: #c4bdad;
    --accent-gold: #c9a34e;
    --color-attack: #590914;
    --color-range: #1d2d52;
    --color-defense: #362717;
    --color-health: #1a361a;
    --card-background: #f0e2b4;
    font-size: clamp(8pt, 1vw, 16pt);
}

.focus-mode {
    --bg-dark: #151515;
    --bg-mid: #1b1b1b;
    --bg-light: #222222;
    --text-primary: #e6e6e6;
    --text-secondary: #bdbdbd;
    --text-muted: #8a8a8a;
    --accent-gold: #c9a34eAA;
    --color-attack: #590914;
    --color-range: #1d2d52;
    --color-defense: #362717;
    --color-health: #1a361a;
    --card-background: #f0e2b4;
    font-size: clamp(8pt, 1vw, 16pt);
}

.tabletop-mode {
    --bg-dark: #2b241c;
    --bg-mid: #3a2f24;
    --bg-light: #4a3b2c;
    --text-primary: #f2e6d2;
    --text-secondary: #d6c3a5;
    --text-muted: #a89478;
    --accent-gold: #d4b35a;
    --color-attack: #b24a3a;
    --color-range: #3a5a8a;
    --color-defense: #8a6a3a;
    --color-health: #4a8a4a;
    --card-background: #e8d8b8;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--text-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-mid);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-light);
}

* {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

body {
    color: var(--bg-dark);
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* @media screen and (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: scroll;
    position: absolute;
    top: 0;
    left: 100%;
  }
} */

.button-icon {
    height: 75%;
    aspect-ratio: 1 / 1;
}

.button-icon-small {
    height: 60%;
    aspect-ratio: 1 / 1;
}

*:focus {
    border: 5px solid var(--text-primary);
}

hr {
    width: 93%;
    color: var(--text-primary);
}

.tutorial-window {
    position: absolute;
    background-color: var(--bg-mid);
    color: var(--text-primary);
    border: 2px solid var(--accent-gold);
    padding: 10px;
    width: 20rem;
    z-index: 9999;
    border-radius: 0.25rem;
    font-size: 1.25rem;
    em {
        display: block;
        font-size: 0.65em;
        text-align: center;
    }
    cursor: pointer;
}

.tutorial-highlight {
    outline: 4px solid color-mix(in srgb, white 20%, var(--accent-gold));
    /* outline-offset: 2px; */
    border-radius: inherit;
    /* box-shadow: inset 0 0 24px 10px var(--accent-gold) !important; */
}

@media screen and (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 5px;
    }

    .tutorial-window {
        width: 40rem;
        font-size: 2rem;
    }

    hr {
        width: 99%;
    }

    .button-icon {
        height: 75%;
    }
}