:root {
  --primary-darkest: #610e06;
  --primary-dark: #aa1c0e;
  --primary-midtone: #fc4d3c;
  --primary-light: #ff7b6f;
  --primary-lightest: #ffafa7;
  --secondary-darkest: #170661;
  --secondary-dark: #3618bc;
  --secondary-midtone: #5f3cfc;
  --secondary-light: #967eff;
  --secondary-lightest: #c1b4fc;
  --accent-darkest: rgba(18, 17, 18, 0.25);
  --accent-dark: rgba(18, 17, 18, 0.5);
  --accent-midtone: rgba(18, 17, 18, 0.75);
  --accent-light: hsla(0, 0%, 89%, 0.5);
  --accent-lightest: hsla(0, 0%, 89%, 0.75);
  --success-darkest: #06441c;
  --success-dark: #118038;
  --success-midtone: #2ac15f;
  --success-light: #71e299;
  --success-lightest: #c5f1d5;
  --info-darkest: #4f9ef8;
  --info-dark: #89befa;
  --info-midtone: #b9d8fc;
  --info-light: #d8e9fd;
  --info-lightest: #ebf4fe;
  --warning-darkest: #856e0a;
  --warning-dark: #be9e0e;
  --warning-midtone: #edc718;
  --warning-light: #f4d467;
  --warning-lightest: #f9ecb3;
  --error-darkest: #60090c;
  --error-dark: #8d0b0f;
  --error-midtone: #fd4249;
  --error-light: #ff7075;
  --error-lightest: #ffadb0;
  --shade-black: #000;
  --shade-7: #121112;
  --shade-6: #19181a;
  --shade-5: #343336;
  --shade-4: #58565a;
  --shade-3: #bcb8bf;
  --shade-2: #e3e1e5;
  --shade-1: #f7f5f8;
  --shade-white: #fff;
  --bg-transparent-80: rgba(25, 24, 26, 0.8);
  --bg-transparent-50: rgba(25, 24, 26, 0.5);
}

* {
  box-sizing: border-box;
}

button {
  cursor: pointer;
}

body {
  background: var(--shade-7);
  color: var(--shade-2);
  padding: 0;
  margin: 0;
}

.content {
  padding: 2em 1em;
  max-width: 40em;
  margin: 0 auto;
}

@keyframes appear {
  from {
    opacity: 0;
    top: 0.5em;
  }
  to {
    opacity: 1;
    top: 0;
  }
}

.logo {
  fill: var(--primary-midtone);
  position: relative;
  cursor: pointer;
  animation: appear 2s;
}
.logo::before {
  content: "";
  background: url("./media/logo.svg");
  filter: blur(15px);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s;
}
.logo:hover::before {
  opacity: 1;
}

.gameWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.field {
  width: 30em;
  height: 30em;
  background: var(--shade-6);

  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
}
.field.x {
  cursor: url("./media/cross.svg") 24 24, pointer;
}
.field.o {
  cursor: url("./media/square.svg") 24 24, pointer;
}

.cell {
  width: 33.33%;
  height: 33.33%;
  border: thin var(--shade-7) solid;
  transition: filter 4s 0.5s;
}

.cell.x {
  color: var(--primary-midtone);
  background-image: url("./media/cross.svg");
  background-size: cover;
  background-position: center;
  cursor: default;
}
.cell.o {
  color: var(--secondary-dark);
  background-image: url("./media/square.svg");
  background-size: cover;
  background-position: center;
  cursor: default;
}

.cell.blur {
  filter: blur(20px);
}

button.reset {
  padding: 1em 1em;
  text-align: center;
  width: 10em;
  background-color: var(--primary-dark);
  transition: background-color 0.2s, box-shadow 0.3s;
  border: none;
  color: inherit;
  border-radius: 2em;
  font-weight: bold;
  position: relative;
}
button.reset span {
  display: block;
  line-height: 1em;
  transition: transform 0.3s;
}
button.reset span::before {
  content: "🗘";
  width: 1em;
  height: 1em;
  line-height: 1em;
  position: absolute;
  transform: translateX(-0.5em) rotate(180deg);
  opacity: 0;
  transition: transform 0.5s 0.1s, opacity 0.5s 0.1s;
}
button.reset:hover {
  background-color: var(--primary-midtone);
  box-shadow: 0 0 10px var(--primary-midtone);
}
button.reset:hover span {
  transform: translateX(0.75em);
}
button.reset:hover span::before {
  transform: translateX(-1.5em) rotate(0);
  opacity: 1;
}