:root {
  --color-cream-light: #fcfcf6;
  --color-teal-dark: #123;
  --color-grey-light: #ccc;
  --color-grey-dark: #666;
  --color-orange-red: #f63;
  --color-red: #f33;
  --color-green-light: #6f3;
  --color-green-medium: #6c6;
  --color-transparent-white: rgba(255, 255, 255, 0.2);
  --color-transparent-black: rgba(0, 0, 0, 0.2);

  --font-size-s: 1.2rem;
  --font-size-m: 1.4rem;
  --font-size-l: 1.8rem;
  --font-size-xl: 2rem;
  --font-weight-regular: 400;
  --font-weight-semi: 600;

  --theme-accent: var(--color-orange-red);
  --theme-foreground: var(--color-cream-light);
  --theme-background: var(--color-teal-dark);
  --theme-destructive: var(--color-red);
  --theme-valid: var(--color-green-light);
  --theme-faded: var(--color-grey-dark);

  --theme-border-radius: 0.8rem;
  --theme-border-light-theme-only: none;
  --theme-box-shadow-color: var(--color-transparent-white);

  --layout-header-height: 6.4rem;
  --layout-body-height: calc(100vh - var(--layout-header-height));

  --sans-serif: "Raleway", sans-serif;

  font-size: 8px;
}

@media (prefers-color-scheme: light) {
  :root {
    --theme-foreground: var(--color-teal-dark);
    --theme-background: var(--color-cream-light);
    --theme-faded: var(--color-grey-light);
    --theme-valid: var(--color-green-medium);

    --theme-box-shadow-color: var(--color-transparent-black);
    --theme-border-light-theme-only: 1px solid var(--theme-accent);
  }
}

@media screen and (min-width: 768px) {
  :root {
    font-size: 10px;
  }
}

@media screen and (min-width: 1440px) {
  :root {
    font-size: 12px;
  }
}

body {
  margin: 0;
  padding: var(--test-padding) 15px;
  background-color: var(--theme-background);
  color: var(--theme-foreground);
  font-family: var(--sans-serif);
  font-size: var(--font-size-m);
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}

input {
  padding: 0;
  border: none;
  outline: none;
  background-color: #fff;
  color: var(--color-teal-dark);
}

.button {
  border-radius: var(--theme-border-radius);
  background-color: var(--theme-accent);
  color: var(--theme-background);
  text-transform: uppercase;
  font-weight: var(--font-weight-semi);
}

.full-width {
  width: 100%;
}

.overlay-blur {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;

  opacity: 0;
  backdrop-filter: blur(0);
  visibility: hidden;

  transition-property: opacity, backdrop-filter, visibility;
  transition-duration: 100ms;
  transition-timing-function: linear;
  will-change: opacity, backdrop-filter, visibility;
}

.overlay-blur.open {
  opacity: 1;
  backdrop-filter: blur(0.4rem);
  visibility: visible;
}

.menu .menu-header {
  position: relative;
  padding: 16px;
  background: var(--theme-foreground);
  color: var(--theme-background);
}

.menu {
  width: 32rem;
  overflow: hidden;
  border: 1px solid var(--theme-foreground);
  border-radius: 16px;
  box-shadow: 0 0 8rem var(--theme-box-shadow-color);
  background-color: var(--theme-background);
}

.menu .button {
  height: 4.8rem;
}

.menu .menu-body {
  padding: 0 16px;
}

.menu h2 {
  margin: 0;
  text-align: center;
}

.menu .word-input-container {
  display: flex;
  width: 100%;
  height: 4.8rem;
}

.menu .word-input-container > * {
  height: 100%;
}

.menu .word-input-container input {
  width: 100%;
  padding-left: 1.6rem;
  font-size: var(--font-size-l);
  text-transform: uppercase;
  border: var(--theme-border-light-theme-only);
  border-radius: var(--theme-border-radius) 0 0 var(--theme-border-radius);
  box-sizing: border-box;
}

.menu .word-input-container input::placeholder {
  color: var(--theme-faded);
  font-style: italic;
}

.menu .word-input-container input:focus {
  box-shadow: inset 0 0 0.4rem var(--theme-accent);
}

.menu .word-input-container .button {
  flex-shrink: 0;
  width: 4.8rem;
  border-radius: 0 var(--theme-border-radius) var(--theme-border-radius) 0;
}

.menu .section-title {
  position: relative;
  margin-top: 3.2rem;
  margin-bottom: 2.4rem;
  text-align: center;
  text-transform: uppercase;
}

.menu .section-title::before,
.menu .section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--layout-header-height);
  height: 1px;
  background-color: var(--theme-faded);
}

.menu .section-title::before {
  left: 0;
}

.menu .section-title::after {
  right: 0;
}

.menu .select-difficulty {
  display: flex;
}

.menu .select-difficulty > * {
  flex: 1 1 0;
}

.menu .select-difficulty .button {
  height: initial;
  border-radius: 0;
  background: var(--theme-background);
  color: var(--theme-faded);
  transition: border 200ms, box-shadow 200ms;
}

.menu .select-difficulty .button:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.menu .select-difficulty .button:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.menu .select-difficulty .button.checked {
  color: var(--theme-accent);
}

.main-header {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--layout-header-height);
  z-index: 1000;
}

.main-header > * {
  height: 100%;
}

.burger-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--layout-header-height);
  background-color: var(--theme-foreground);
  border-bottom-right-radius: 0.4rem;
  color: var(--theme-background);
  cursor: pointer;
}

.burger-button-bar {
  position: relative;
  transition: visibility;
  transition-duration: 0ms;
  transition-delay: 10ms;
}

.burger-button-bar,
.burger-button-bar::before,
.burger-button-bar::after {
  width: 3.2rem;
  height: 0.2rem;
  border-radius: 1px;
  background-color: currentColor;
}

.burger-button-bar::before,
.burger-button-bar::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 100ms;
  visibility: visible;
}

.burger-button-bar::before {
  transform: translateY(-0.8rem);
}

.burger-button-bar::after {
  transform: translateY(0.8rem);
}

.burger-button.open .burger-button-bar {
  visibility: hidden;
  transition-delay: 0ms;
}

.burger-button.open .burger-button-bar::before {
  transform: rotateZ(-45deg);
}

.burger-button.open .burger-button-bar::after {
  transform: rotateZ(45deg);
}

.main-header .page-title {
  display: flex;
  align-items: center;
  margin-left: 3.2rem;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.2rem;
}

.main-header .github {
  width: 4rem;
  height: 4rem;
  margin-left: auto;
  margin-right: 2rem;
  cursor: pointer;
}

.main-header .github img {
  width: 100%;
  height: 100%;
  filter: brightness(5) saturate(0);
  transition: filter 200ms;
}

.main-header .github img:hover {
  filter: brightness(10) saturate(0);
}

.game-container {
  --padding-size: 2rem;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  row-gap: 4rem;
  max-width: 80rem;
  min-height: calc(var(--layout-body-height) - 2 * var(--padding-size));
  margin: auto;
  padding: var(--padding-size);
  padding-top: var(--layout-header-height);
}

.keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.8rem;
  row-gap: 0.8rem;
}

.keyboard .letter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.2rem;
  height: 5.2rem;
  border: 1px solid currentColor;
  color: var(--theme-foreground);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semi);
  text-transform: uppercase;
  background-color: var(--theme-background);
  transition-property: color, background-color, transform;
  transition-duration: 200ms;
}

.keyboard .letter:not([disabled]) {
  box-shadow: 0 0 1.2rem var(--theme-box-shadow-color);
}

.keyboard .letter:not([disabled]):hover {
  background-color: var(--theme-foreground);
  color: var(--theme-background);
  transform: scale(1.15);
}

.keyboard .letter[disabled] {
  border: none;
  color: var(--theme-faded);
  cursor: not-allowed;
}

.word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 6.4rem;
}

.word > .letter:not(:last-of-type) {
  margin-right: 0.8rem;
}

.word .letter {
  display: block;
  text-transform: uppercase;
}

.chances {
  position: relative;
}

.chances::before {
  --height: 2rem;
  --height-half: calc(var(--height) / 2);

  content: "";
  position: absolute;
  top: calc(50% - var(--height-half));

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--height);
  opacity: 0;
  transform: scaleY(0);

  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.2rem;
  text-align: center;
  text-transform: uppercase;
}

.chances.over::before {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  transition: opacity 200ms 600ms, transform 200ms 600ms;
}

.chances.victory::before {
  content: "victory";
  color: var(--theme-valid);
}

.chances.defeat::before {
  content: "defeat";
  color: var(--theme-destructive);
}

.chances .container {
  display: flex;
  justify-content: center;
  height: 0.2rem;
  overflow-x: hidden;
  background: var(--theme-faded);
}

.chances.over .container {
  background: none;
}

.chances .progress-bar {
  width: 50%;
  height: 100%;
  color: var(--theme-accent);
  background-color: currentColor;
  transition-property: transform, color;
  transition-duration: 800ms;
  transition-timing-function: ease-out;
}

.chances .progress-bar.left {
  transform-origin: right;
}

.chances .progress-bar.right {
  transform-origin: left;
}

.chances.victory .progress-bar {
  color: var(--theme-valid);
}

.chances.defeat .progress-bar {
  color: var(--theme-destructive);
}