/* reset - https://www.joshwcomeau.com/css/custom-css-reset/ */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
/**:not(dialog) {
  margin: 0;
}*/

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* ------ */

canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

body {
    margin: 0;
    overflow: hidden;
    color: white;
    font-family: monospace;
    background-color: rgb(16 16 16);
}

:root {
    --skyblue: rgb(102 191 255);
    --blue: rgb(0 121 241);
    --darkblue: rgb(0 82 172);
    --purple: rgb(200 122 255);
    --pink: rgb(255 109 194);
    --green: rgb(0 228 48);

    --gray: rgb(130 130 130);

    --opening: #1aff55;
    --middle: #1ab9ff;
    --finale: #ff1a4a;
    --encore: #c342ff;
    --backstage: #ff006e;
}

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

dialog {
    background-color: #0f0f0f;
    border-color: var(--skyblue);
    border-width: 4px;
    color: white;
    font-size: 1rem;
}

#about {
    max-width: 450px;
    line-height: 1.6rem;
}

.version-info {
    color: var(--gray);
    font-size: 0.8em;
    line-height: 0.8em;
}

p {
    font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#load-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 1rem;
}

#chart-picker {
    width: 100%;
    height: 100%;
    max-width: 900px;
}

#chart-picker > div {
    display: flex;
    gap: 1rem;
    max-height: 100%;
}
#chart-picker > div > *:first-child {
    display: flex;
    flex-direction: column;
}
#chart-picker > div > *:last-child {
    flex: 1;
}
#chart-picker input[type="radio"] {
    display: none;
}
#chart-picker input[type="radio"]:checked+label {
    background-color: var(--darkblue);
}
#chart-picker input[type="radio"]:checked+label .hint {
    color: rgb(200 200 200);
}
#charts-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
}
#charts-list > * > label {
    display: block;
    max-width: 400px;
    padding: 0.25rem 0.5rem;
}

#load-screen .text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

button {
    font-size: 20px;
    color: inherit;
    padding: 0.5rem;
    border-style: solid;
    border-width: 2px;
    border-color: var(--gray);
    background: none;
}

button.blue {
    color: var(--blue);
    border-color: var(--blue);
}
button.pink {
    color: var(--pink);
    border-color: var(--pink);
}
button.purple {
    color: var(--purple);
    border-color: var(--purple);
}

button:hover {
    background: rgba(255 255 255 / 0.05);
}

input[type="text"] {
    background: none;
    border-width: 2px;
    border-style: solid;
    border-color: var(--blue);
    padding: 0.5rem;
    color: inherit;
    font-size: inherit;
}

input:focus {
    outline: 1px solid;
}

.hint {
    font-size: 14px;
    color: var(--gray);
}

#load-screen .links {
    color: var(--gray);
}

#difficulty-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#difficulty-buttons button {
    display: flex;
    flex-direction: column;
    align-items: start;
}

button.OPENING {
    color: var(--opening);
    border-color: var(--opening);
}

button.MIDDLE {
    color: var(--middle);
    border-color: var(--middle);
}

button.FINALE {
    color: var(--finale);
    border-color: var(--finale);
}

button.ENCORE {
    color: var(--encore);
    border-color: var(--encore);
}

button.BACKSTAGE {
    color: var(--backstage);
    border-color: var(--backstage);
}

th {
    text-align: right;
}

th::after {
    content: ":";
}

th, td {
    padding: 0.125rem;
}

table {
    margin-bottom: 1rem;
}

#chart-picker h1 {
    margin-top: 0;
    margin-bottom: 1rem;
}