:root {
  --fg: #ffffff;
  --subdued: #ffffff99;
  --loading: #ffffff66;
  --accent: #27513a;
  --subdued-accent: #23658f99;
  --heading: #75c69f;
  --link: #f4ea94;
  --green: #aaffaa;
  --red: #ffaaaa;
  --bg: #1f3328;
  --bg2: #15211a;
  --tutorial: #dbffe4;
  --novice: #a3ecff;
  --moderate: #d5a3ff;
  --brutal: #ffbd8b;
  --insane: #ff6574;
  --shadow: 1px 1px 2px #000000;
}

* {
  box-sizing: border-box;
  color: var(--fg);
  line-height: 1.2;
  margin: 0;
  scrollbar-color: var(--subdued-accent) transparent;
}

*:not(input) {
  text-shadow: var(--shadow);
}

*::selection {
  color: var(--bg);
  background-color: var(--link);
}

*::placeholder {
  color: var(--subdued);
}

html {
  font-size: 18px;
}

body {
  background-color: var(--bg);
  font-family: sans-serif;
  padding: 1rem;
  height: 100vh;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: var(--heading);
}
h1 {
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: 1.2rem;
}
h2, h3, h4, h5, h6 {
  margin: 1.2rem 0 0.3rem;
}
h2 {
  font-size: 1.5rem;
}
h3, h4, h5, h6 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

ul, ol {
  padding-left: 1rem;
}
ul {
  list-style-type: '- ';
}
li + li {
  margin-top: 0.25rem;
}

input[type="text"], select {
  background-color: var(--accent);
  border: none;
  font-size: 1rem;
  padding: 0.4rem 0.3rem;
  border-radius: 4px;
}
select {
  height: 2rem;
  width: max-content;
}

input[type="text"]:focus {
  outline: none;
  border: 2px solid var(--subdued);
  padding: calc(0.4rem - 2px) calc(0.3rem - 2px);
}

.won {
  color: var(--green);
}
.lost {
  color: var(--red);
}

.logo {
  height: 5rem;
  width: 5rem;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
}

.row {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
}

.gap-sm {
  gap: 0.5rem;
}
.gap, .gap-md {
  gap: 1rem;
}
.gap-lg {
  gap: 2rem;
}

.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.align-center {
  align-items: center;
}

.mb-sm {
  margin-bottom: 0.5rem;
}
.mb-md, .mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mt-sm {
  margin-top: 0.5rem;
}
.mt-md, .mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.ml-sm {
  margin-left: 0.5rem;
}
.ml-md, .ml-1 {
  margin-left: 1rem;
}
.ml-2 {
  margin-left: 2rem;
}
.mr-sm {
  margin-right: 0.5rem;
}
.mr-md, .mr-1 {
  margin-right: 1rem;
}
.mr-2 {
  margin-right: 2rem;
}

.max-xs {
  max-width: 80px;
}
.max-sm {
  max-width: 160px;
}
.max-md {
  max-width: 320px;
}
.max {
  width: 100%;
}
.xs {
  width: 80px;
}
.sm {
  width: 160px;
}
.md {
  width: 320px;
}

/* COMPONENTS */

#lb, #main {
  max-height: calc(100vh - 10.5rem);
  overflow-y: auto;
}

.loading, .loading * {
  color: var(--loading);
}

.lb-item {
  display: flex;
  gap: 0.3rem;
  flex-direction: row;
  align-items: center;
  margin-top: 0.3rem;
}
.lb-item__position {
  min-width: 3ch;
  text-align: right;
}
.lb-item__position::after {
  content: '.'
}
.lb-item__position {
  color: var(--subdued);
  min-width: 3ch;
  text-align: right;
}
.lb-item__name {
  font-size: 1.2rem;
  cursor: pointer;
}
.lb-item__name:hover {
  color: var(--link);
}
.lb-item__rating {
  color: var(--subdued);
}
.lb-item__rating::before {
  content: '('
}
.lb-item__rating::after {
  content: ')'
}

#lb {
  margin-right: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

#games, #stats {
  display: none;
  flex-direction: column;
}

#main-wrapper[data-toggle="games"] #games,
#main-wrapper[data-toggle="stats"] #stats {
  display: flex;
}

#main-heading {
  position: relative;
}

#back-to-games {
  display: none;
}

#main-wrapper[data-toggle="stats"] #back-to-games {
  display: inline-block;
  position: absolute;
  cursor: pointer;
  top: 0;
  right: -4ch;
  color: var(--subdued);
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  border-radius: 4px;
  padding: 0 1rem;
}

#main-wrapper[data-toggle="stats"] #back-to-games:hover {
  color: var(--fg);
}

.games {
  display: flex;
  flex-direction: column;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

.game {
  display: flex;
  gap: 0.3rem;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.3rem;
}
.game__name {
  font-size: 1.2rem;
  cursor: pointer;
}
.game__name:hover {
  color: var(--link);
}
.game__rating {
  color: var(--subdued);
}
.game__rating::before {
  content: '('
}
.game__rating::after {
  content: ')'
}
.game__delta.won::before {
  content: '+'
}
.game__delta.lost::before {
  content: '-'
}
.game__scorebox {
  display: flex;
  gap: 0.3rem;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--subdued-accent);
  border-radius: 4px;
}
.game__score, .game__separator {
  font-size: 1.2rem;
  font-weight: bold;
}
.game__separator::before {
  content: '-';
}
.game__score:not(.right) {
  margin-left: 0.5rem;
}
.game__score.right {
  margin-right: 0.5rem;
}
.game__time {
  color: var(--subdued);
  margin-right: 0.5rem;
}

.color--tutorial {
  color: var(--tutorial);
}
.color--novice {
  color: var(--novice);
}
.color--moderate {
  color: var(--moderate);
}
.color--brutal {
  color: var(--brutal);
}
.color--insane {
  color: var(--insane);
}
.hover-color--tutorial:hover {
  color: var(--tutorial);
}
.hover-color--novice:hover {
  color: var(--novice);
}
.hover-color--moderate:hover {
  color: var(--moderate);
}
.hover-color--brutal:hover {
  color: var(--brutal);
}
.hover-color--insane:hover {
  color: var(--insane);
}

.stats__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  text-shadow: var(--shadow);
}

.stats__info-position {
  color: var(--subdued);
  font-size: 1.5rem;
  text-align: right;
}
.stats__info-position::after {
  content: '.';
}

.stats__info-name {
  font-size: 1.2rem;
  margin-left: 0.4rem;
}

.stats__info-banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.3rem;
  margin-left: 1.2rem;
  padding: 0.5rem;
  background-color: var(--subdued-accent);
  border-radius: 4px;
}

.stats__misc {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0.3rem;
  padding-left: 0.3rem;
  color: var(--subdued);
  white-space: pre;
}

.games-graph {
  background-color: var(--bg2);
  padding: 1rem 1.2rem;
  margin-top: 1rem;
  margin-right: 0.5rem;
  border: 2px solid var(--subdued-accent);
}

/* Localization */

#lb-heading::before {
  content: 'Leaderboard';
}
#main-heading {
  max-width: max-content;
}
#main-heading::before {
  content: 'Games';
}
#main-wrapper[data-toggle="stats"] #main-heading::before {
  content: 'Stats';
}
body[data-language="spanish"] #lb-heading::before {
  content: 'Clasificación';
}
body[data-language="spanish"] #main-heading::before {
  content: 'Partidos';
}
body[data-language="spanish"] #main-wrapper[data-toggle="stats"] #main-heading::before {
  content: 'Estadísticas';
}
body[data-language="brazilian-portuguese"] #lb-heading::before {
  content: 'Clasificación';
}
body[data-language="brazilian-portuguese"] #main-heading::before {
  content: 'Jogos';
}
body[data-language="brazilian-portuguese"] #main-wrapper[data-toggle="stats"] #main-heading::before {
  content: 'Estadísticas';
}
body[data-language="chinese"] #lb-heading::before {
  content: '排行榜';
}
body[data-language="chinese"] #main-heading::before {
  content: '游戏';
}
body[data-language="chinese"] #main-wrapper[data-toggle="stats"] #main-heading::before {
  content: '玩家数据';
}
body[data-language="turkish"] #lb-heading::before {
  content: 'Liderlik tablosu';
}
body[data-language="turkish"] #main-heading::before {
  content: 'Maçlar';
}
body[data-language="turkish"] #main-wrapper[data-toggle="stats"] #main-heading::before {
  content: 'Istatistikler';
}