:root {
  --fs: 1vw;
  --black: #000;
  --white: #FFF;
  --yellow: rgb(253, 255, 180);
  --pink: rgb(255, 170, 170);
  --grey: rgb(190, 190, 190);
  --blue: rgb(167, 223, 238);
  /* --blue: #67DEF7; */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --snap: cubic-bezier(.175,.885,.32,2);
  --settle: cubic-bezier(.07,.29,.4,1.26);
  --grid-gap: 1rem;
  --radius: 1rem;
  --bg-1: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  --bg-2: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  --bg-3: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
  --bg-4: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
  --bg-5: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
  --bg-6: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  --bg-7: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  --bg-8: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
  --bg-9: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  --bg-10: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  --bg-11: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  --bg-12: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  --bg: var(--bg-7);
  --cell-opacity: 0.33;
  --grid-size: 100rem;
  --cell-font-size: 10rem;
  font-size: var(--fs);
}

@media only screen and (min-width: 768px) {
  :root{
    --fs: 0.42em;
  }
  body{
    max-width: var(--grid-size);
  }
}

*{
  box-sizing: border-box;
}

html{
  background: var(--bg);
}

html, body {
  padding: 0;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: block;
  width: 100%;
  min-height: 100%;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
}

body{
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button,
button:active,
button:focus,
button:visited,
input[type=range],
input[type=range]:focus{
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.cell{
  display: flex;
  justify-content:center;
  align-items:center;
  text-transform: uppercase;
  font-size: 7rem;
  font-weight: bold;
  background: var(--white);
  border-radius: var(--radius);
}

.cell--selected{
  animation-name: bubble;
  animation-duration: 200ms;
  animation-timing-function: var(--snap);
  /* box-shadow: 0px 0px 0px 1rem var(--yellow); */
  background-color: var(--yellow);
  /* color: var(--white); */
}

.cell--x{
  background: var(--white);
  color: var(--white);
  opacity: var(--cell-opacity);
  -webkit-text-fill-color: transparent;
}

.grid--drag .cell.cell--x{
  color: var(--yellow);
  opacity: 1;
}

.grid{
  position: relative;
  display: none;
  grid-gap: var(--grid-gap);
  overflow: hidden;
  z-index: 1;
  justify-content: center;
}

.grid--active,
.grid--drag{
  display: grid;
}

.grid--ripple .cell{
  animation-name: bubble;
  animation-duration: 400ms;
  animation-timing-function: var(--snap);
}

/* 5 */
.grid[data-size="9"]{
  grid-template-columns: repeat(9, calc((var(--grid-size) - var(--grid-gap) * 8) / 9));
  font-size: calc(var(--cell-font-size) / 9);
}

.grid[data-size="9"] .cell{
  width: calc((var(--grid-size) - var(--grid-gap) * 8) / 9);
  height: calc((var(--grid-size) - var(--grid-gap) * 8) / 9);
}

.grid[data-size="9"] .grid--row{
  grid-template-columns: repeat(calc(9 * 3), calc((var(--grid-size) - var(--grid-gap) * 8) / 9));
}

.grid[data-size="9"] .grid--col{
  grid-template-rows: repeat(calc(9 * 3), calc((var(--grid-size) - var(--grid-gap) * 8) / 9));
}

/* 5 */
.grid[data-size="5"]{
  grid-template-columns: repeat(5, calc((var(--grid-size) - var(--grid-gap) * 4) / 5));
  font-size: calc(var(--cell-font-size) / 5);
}

.grid[data-size="5"] .cell{
  width: calc((var(--grid-size) - var(--grid-gap) * 4) / 5);
  height: calc((var(--grid-size) - var(--grid-gap) * 4) / 5);
}

.grid[data-size="5"] .grid--row{
  grid-template-columns: repeat(calc(5 * 3), calc((var(--grid-size) - var(--grid-gap) * 4) / 5));
}

.grid[data-size="5"] .grid--col{
  grid-template-rows: repeat(calc(5 * 3), calc((var(--grid-size) - var(--grid-gap) * 4) / 5));
}

.grid--drag{
  position: absolute;
}

.grid--drag .cell{
  background: var(--yellow);
}

.grid--hide[data-hide="row-0"] .cell[data-row="0"],
.grid--hide[data-hide="row-1"] .cell[data-row="1"],
.grid--hide[data-hide="row-2"] .cell[data-row="2"],
.grid--hide[data-hide="row-3"] .cell[data-row="3"],
.grid--hide[data-hide="row-4"] .cell[data-row="4"],
.grid--hide[data-hide="row-5"] .cell[data-row="5"],
.grid--hide[data-hide="row-6"] .cell[data-row="6"],
.grid--hide[data-hide="row-7"] .cell[data-row="7"],
.grid--hide[data-hide="row-8"] .cell[data-row="8"],
.grid--hide[data-hide="col-0"] .cell[data-col="0"],
.grid--hide[data-hide="col-1"] .cell[data-col="1"],
.grid--hide[data-hide="col-2"] .cell[data-col="2"],
.grid--hide[data-hide="col-3"] .cell[data-col="3"],
.grid--hide[data-hide="col-4"] .cell[data-col="4"],
.grid--hide[data-hide="col-5"] .cell[data-col="5"],
.grid--hide[data-hide="col-6"] .cell[data-col="6"],
.grid--hide[data-hide="col-7"] .cell[data-col="7"],
.grid--hide[data-hide="col-8"] .cell[data-col="8"]{
  visibility: hidden;
  pointer-events: none;
}

.grid--snap{
  transition: transform 120ms;
  transition-timing-function: var(--snap);
}

.menu{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--bg);
  font-size: 4rem;
  font-weight: bold;
  z-index: 2;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.menu--active{
  display: flex;
}

.menu-controls{
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  width: 100%;
}

.menu-controls .button--icon{
  background: transparent;
  box-shadow: none;
}

.menu-controls .button--icon .icon{
  fill: var(--black);
  opacity: 0.3;
  width: 10rem;
  height: 10rem;
}

/* .button--settings .icon{
  fill: var(--grey);
}

.button--progress .icon{
  fill: var(--yellow);
} */

.menu h1{
  margin-top: auto;
}

.toast{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--white);
  font-size: 7rem;
  z-index: 3;
  border-top-left-radius: 10rem;
  border-top-right-radius: 10rem;
  animation: toast 200ms, fadeIn 100ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  transform: translateY(100%);
  opacity: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.toast div{
  padding: 2rem;
}

.toast--active{
  display: flex;
}

@keyframes toast{
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(12rem);
  }
}

@keyframes slideIn{
  0%{
    transform: translateX(50%);
  }
  100%{
    transform: translateX(0);
  }
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes pop{
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.075);
  }
}

@keyframes bubble{
  0%{
    transform: scale(1);
    /* opacity: var(--cell-opacity); */
  }
  50%{
    transform: scale(1.3);
    /* opacity: 0.75; */
  }
  0%{
    transform: scale(1);
    /* opacity: var(--cell-opacity); */
  }
}

button{
  padding: 3rem 5rem;
  font-size: 5rem;
  margin: 2rem;
  font-weight: bold;
  background: transparent;
  border: 0;
  position: relative;
  border-radius: 10rem;
  box-shadow: 0px 0px 0px 1rem var(--blue);
  background: var(--white);
}

.button--icon{
  padding: 3rem;
}

.button--clicked,
.menu .button--clicked{
  animation: pop 120ms cubic-bezier(.175,.885,.32,2);
  opacity: 1;
}

button:focus,
button:active{
  outline: none;
}

.menu>button{
  transform: translateX(100%);
  opacity: 0;
}

.menu--active>button{
  animation: slideIn 400ms, fadeIn 200ms;
  animation-timing-function: var(--settle);
  animation-fill-mode: forwards;
}

button:nth-child(1){
  animation-delay: 100ms;
}

button:nth-child(2){
  animation-delay: 200ms;
}

button:nth-child(3){
  animation-delay: 300ms;
}

button:nth-child(4){
  animation-delay: 400ms;
}

.controls{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem;
}

.words{
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: bold;
  display: none;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 2rem 0;
}

.words--active{
  display: flex;
}

.word{
  display: inline-block;
  padding: 2rem 4rem;
  margin: 1rem;
  position: relative;
}

.word:before{
  border-radius: 10rem;
  transition: background 100ms ease-in;
  content:'';
  position: absolute;
  z-index:-1;
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
}

.word--found{
  background: var(--bg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.word--found:before{
  background-color: var(--black);
}

.icon {
  display: flex;
  width: 7rem;
  height: 7rem;
  vertical-align: middle;
}

.icon{
  fill: var(--black);
}

svg {
  width: 100%;
  height: 100%;
}

.level-name{
  font-size: 5rem;
}

.level-name---hide,
.button--hide{
  display: none;
}

.selected{
  padding: 2rem 0;
  text-transform: uppercase;
  font-size: 7rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
}

.letter{
  /* padding: 1rem; */
}

.toggle{
  display: flex;
  align-items: center;
}

.toggle .toggle-on{
  display: none;
}

.toggle--on .toggle-on{
  display: block;
}

.toggle--on .toggle-off{
  display: none;
}

.settings-menu, .progress-menu, .levels-menu{
  padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
}

.settings-menu .menu-controls, .progress-menu .menu-controls, .levels-menu .menu-controls{
  /* margin-top: auto;
  flex: 1; */
  justify-content: center;
}

.levels{
  overflow-y: auto;
  width: 100%;
  display: block;
  margin:4rem 0;
  padding: 0;
  flex: 1 0 0;
}

.level-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5rem;
}

.lvl{
  flex: 1;
  text-align: center;
}

.levels-menu h1{
  margin-top: revert;
}

.difficulty{
  text-align: center;
  text-transform: uppercase;
  flex: 2;
  /* font-size: 4rem; */
  /* opacity: 0.3; */
  /* font-weight: normal; */
}

.level-item .icon{
  /* opacity: 0.3; */
  flex: 1;
}

.level-item .play{
  display: none;
}

.level-item--unlocked .lock{
  display: none;
}

.level-item--unlocked .play{
  display: block;
}

.settings-menu .label{
  padding: 2rem;
  font-size: 5rem;
  text-align: center;
}

.settings-menu .toggle{
  padding: 1rem;
}

.menu-item{
  font-size: 5rem;
  padding: 1rem;
}

.score{
  font-size: 7rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  padding: 3rem;
}

input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: transparent;
  margin: 2rem;
}
input[type=range]:focus {
  outline: none;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2rem;
  cursor: pointer;
  box-shadow: 0px 0px 0px .6rem var(--black);
  background: transparent;
  border-radius: 3rem;
  border: 0;
}
input[type=range]::-webkit-slider-thumb {
  border: 0px solid #000000;
  height: 6rem;
  width: 6rem;
  border-radius: 4rem;
  background: var(--black);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: calc((6rem - 2rem) / 2 * -1);
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--white);
}
.high-score{
  color: var(--grey);
  -webkit-text-fill-color: var(--white);
  opacity: 0.5;
}
.word--scored{
  animation-name: bubble;
  animation-duration: 200ms;
  animation-timing-function: var(--snap);
}