html {
  min-height: 100%;
}

body {
  font-family: "Nunito", Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #e8e9e6;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #6eb116;
  z-index: 100;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.banco {
  position: fixed;
  top: 59px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 12vh;
  padding: 0 2px;
  z-index: 2;
}
@media (min-width: 1024px) {
  .banco {
    padding: 0 5px;
  }
}
.banco__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.gameboard {
  position: fixed;
  top: 59px;
  left: 0;
  display: grid;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  min-height: calc(100% - 12vh - 59px);
  padding: 8px 8px 96px 8px;
}
@media (min-width: 768px) {
  .gameboard {
    padding: 7px 7px 52px 7px;
  }
}
@media (min-width: 768px) and (orientation: portrait) {
  .gameboard {
    padding: 15px 15px 52px 15px;
  }
}
@media (min-width: 1280px) {
  .gameboard {
    padding: 15px 15px 64px 15px;
  }
}
@media (min-width: 1920px) {
  .gameboard {
    padding: 20px 20px 64px 20px;
  }
}
.gameboard__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  padding-bottom: 216px;
}
@media (min-width: 1280px) {
  .gameboard__wrapper {
    gap: 15px;
    padding-bottom: 174px;
  }
}
@media (min-width: 1920px) {
  .gameboard__wrapper {
    gap: 20px;
  }
}
@media (orientation: portrait) {
  .gameboard__wrapper {
    padding-bottom: 51vh;
  }
}
@media (hover: none) and (max-width: 1024px) {
  .gameboard__wrapper {
    padding-bottom: 51vh;
  }
}
@media (orientation: portrait) {
  body.escrito .gameboard__wrapper {
    flex-direction: column;
    gap: 5px;
  }
}
@media (orientation: portrait) and (min-width: 768px) {
  body.escrito .gameboard__wrapper {
    gap: 10px;
  }
}
.gameboard__texto {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: inherit;
  max-width: 640px;
  margin: 0 auto auto;
  background-color: transparent;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(0, 0, 0, 0.05), 0 3px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
  .gameboard__texto {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(0, 0, 0, 0.05), 0 4px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.25);
  }
}
.gameboard__texto__parrafo {
  padding: 15px 15px 25px 30px;
  width: 100%;
  background: transparent;
  font-family: "Nunito", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 2.35;
  font-weight: 400;
}
@media (min-width: 768px) {
  .gameboard__texto__parrafo {
    padding: 40px 50px 70px 60px;
    font-size: 16px;
    line-height: 2.5;
  }
}
.gameboard__texto__parrafo::-moz-selection {
  background: #cef69c;
}
.gameboard__texto__parrafo::selection {
  background: #cef69c;
}
.gameboard__texto__hueco {
  display: inline-block;
  min-width: 64px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  background: white;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px #6EB118 inset;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease-out;
}
@media (min-width: 768px) {
  .gameboard__texto__hueco {
    min-width: 96px;
    height: 36px;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px #6EB118 inset;
  }
}
.gameboard__texto__hueco.filled {
  min-width: auto;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px #6EB118 inset;
}
@media (min-width: 768px) {
  .gameboard__texto__hueco.filled {
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px #6EB118 inset;
  }
}
.gameboard__texto__hueco[contenteditable=true] {
  outline: 0;
  cursor: text;
}
.gameboard__texto__hueco[contenteditable=true]:empty {
  min-width: auto;
}
.gameboard__texto__hueco.active, .gameboard__texto__hueco:hover, .gameboard__texto__hueco:focus, .gameboard__texto__hueco:focus-within, .gameboard__texto__hueco.filled.active, .gameboard__texto__hueco.filled:hover, .gameboard__texto__hueco.filled:focus, .gameboard__texto__hueco.filled:focus-within {
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px #6EB118 inset, 0px 0px 0px 1px #6EB118;
  transition: box-shadow 0.2s ease-in;
}
.gameboard__texto .error, .gameboard__texto .acierto {
  position: relative;
  padding-left: 25px;
  color: white;
  background-color: #E0684F;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px #C2371A inset;
  font-weight: 800;
  cursor: default;
}
@media (min-width: 768px) {
  .gameboard__texto .error, .gameboard__texto .acierto {
    padding-left: 15px;
  }
}
.gameboard__texto .error::before, .gameboard__texto .acierto::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translate(0, -50%);
  width: 100%;
  height: calc(100% + 8px);
  border-radius: 4px;
  z-index: -1;
}
.gameboard__texto .error::after, .gameboard__texto .acierto::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translate(0, -50%);
  width: 20px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.gameboard__texto .acierto {
  padding-left: 30px;
  background-color: #6EB118;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px #6EB118 inset;
}
.gameboard__texto .acierto::before {
  background-color: #BAEC79;
}
.gameboard__texto .acierto::after {
  background-position: right center;
  background-image: url('data:image/svg+xml,<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5816 1.32088C14.1395 1.87878 14.1395 2.7833 13.5816 3.34119L5.92087 11.0019C5.36298 11.5598 4.45845 11.5598 3.90056 11.0019L0.418419 7.51976C-0.139473 6.96187 -0.139473 6.05735 0.418419 5.49946C0.976311 4.94156 1.88083 4.94156 2.43872 5.49946L4.91071 7.97145L11.5613 1.32088C12.1192 0.762993 13.0237 0.762993 13.5816 1.32088Z" fill="%23BAEC79"/></svg>');
}
.gameboard__texto .error::after {
  background-image: url('data:image/svg+xml,<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.82904 0.975191C1.41062 0.556772 0.732233 0.556772 0.313814 0.975191C-0.104605 1.39361 -0.104605 2.072 0.313814 2.49042L2.98477 5.16138L0.313814 7.83233C-0.104605 8.25075 -0.104605 8.92914 0.313814 9.34756C0.732233 9.76598 1.41062 9.76598 1.82904 9.34756L4.5 6.67661L7.17096 9.34756C7.58938 9.76598 8.26777 9.76598 8.68619 9.34756C9.1046 8.92914 9.1046 8.25075 8.68619 7.83233L6.01523 5.16138L8.68619 2.49042C9.1046 2.072 9.1046 1.39361 8.68619 0.975191C8.26777 0.556772 7.58938 0.556772 7.17096 0.975191L4.5 3.64615L1.82904 0.975191Z" fill="%23C2371A"/></svg>');
}
.gameboard__bancopalabras {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 30px 10px 124px 10px;
  gap: 10px;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 43vh;
  border-radius: 16px 16px 0px 0px;
  border: 1px solid #6EB118;
  background-color: #CEF69C;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.25), 0px -3px 0px 0px rgba(0, 0, 0, 0.15), 0px 0px 0px 3px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  overflow-y: auto;
  z-index: 1;
}
@media (orientation: landscape) {
  .gameboard__bancopalabras {
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    width: calc(38vw - 14px);
    height: -moz-fit-content;
    height: fit-content;
    max-height: calc(88vh - 120px);
    border-radius: 24px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.25), 0px 6px 0px 0px rgba(0, 0, 0, 0.15), 0px 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  }
}
@media (min-width: 1024px) {
  .gameboard__bancopalabras {
    max-height: calc(88vh - 140px);
  }
}
@media (min-width: 1280px) {
  .gameboard__bancopalabras {
    position: fixed;
    top: 74px;
    left: calc(50% - 485px);
    width: 280px;
    max-height: calc(100vh - 156px);
    padding: 35px 15px 52px 15px;
    transform: translateX(-50%);
  }
}
@media (min-width: 1920px) {
  .gameboard__bancopalabras {
    position: fixed;
    top: 79px;
    left: calc(50% - 550px);
    width: 420px;
    max-height: calc(100vh - 109px);
    padding: 35px 40px 52px 40px;
    transform: translateX(-50%);
  }
}
.gameboard__bancopalabras__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  row-gap: 6px;
}
@media (min-width: 768px) {
  .gameboard__bancopalabras__wrapper {
    gap: 4px;
    row-gap: 8px;
  }
}
.gameboard__bancopalabras__palabra {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 64px;
  height: 30px;
  padding: 0px 8px;
  border-radius: 6px;
  background-color: white;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15), 0px 1px 0px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 1px #6EB118 inset;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
@media (min-width: 768px) {
  .gameboard__bancopalabras__palabra {
    height: 36px;
    padding: 0px 12px;
    border-radius: 8px;
    font-size: 15px;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.15), 0px 1px 0px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 1px #6EB118 inset;
    transition: background-color 0.2s ease-out, transform 0.1s ease-out;
  }
}
.gameboard__bancopalabras__palabra.filled {
  color: #447308;
  background-color: transparent;
  text-decoration-line: line-through;
  box-shadow: 0px 0px 0px 1px #6EB118 inset;
  transition: background-color 0.2s ease-in, transform 0.2s ease-in;
}
.gameboard__bancopalabras__palabra:hover {
  background-color: #ECFED7;
  transition: background-color 0.2s ease-in, transform 0.2s ease-in;
}
.gameboard__bancopalabras__palabra:active, .gameboard__bancopalabras__palabra:focus, .gameboard__bancopalabras__palabra:focus-within {
  background-color: #CEF69C;
  cursor: grab;
  transition: background-color 0.2s ease-in, transform 0.2s ease-in;
}
.gameboard__bancopalabras__palabra:hover:active {
  transform: rotate(-7deg);
  transition: background-color 0.2s ease-in, transform 0.2s ease-in;
}
body.escrito .gameboard__bancopalabras__palabra {
  height: 16px;
  padding: 0 5px;
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
}
body.escrito .gameboard__bancopalabras__palabra.filled {
  color: #64A311;
}
body.escrito .gameboard__bancopalabras {
  padding: 30px 10px 35px;
}
@media (orientation: portrait) {
  body.escrito .gameboard__bancopalabras {
    position: sticky;
    top: 0;
    max-height: 10.7vh;
    padding: 10px 5px;
    border-radius: 16px;
  }
}
.gameboard__comprobar {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  width: 80px;
  height: 80px;
  outline: 0;
  border: 1px solid #588A23;
  background: rgba(155, 216, 76, 0.85);
  box-shadow: 0px 0px 0px 3px rgba(17, 32, 0, 0.15), 0px 1px 0px 0px rgba(17, 32, 0, 0.6);
  box-shadow: 0px 0px 0px 4px rgba(17, 32, 0, 0.1), 0px 0px 0px 1px rgba(17, 32, 0, 0.15), 0px 1px 0px 0px rgba(17, 32, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  border-radius: 50%;
  font-family: "Nunito", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  transition: all 0.25s ease-out;
  cursor: pointer;
  z-index: 2;
}
@media (min-width: 1024px) {
  .gameboard__comprobar {
    width: auto;
    height: 64px;
    padding: 0 64px;
    border-radius: 32px;
  }
}
.gameboard__comprobar __ico svg {
  transition: all 0.3s ease-out;
}
.gameboard__comprobar__txt {
  display: none;
}
@media (min-width: 1024px) {
  .gameboard__comprobar__txt {
    display: block;
  }
}
.gameboard__comprobar:hover, .gameboard__comprobar:focus {
  color: white;
  box-shadow: 0px 0px 0px 4px rgba(17, 32, 0, 0.25), 0px 0px 0px 1px rgba(17, 32, 0, 0.15), 0px 1px 0px 0px rgba(17, 32, 0, 0.6);
  transition: all 0.25s ease-in;
}
.gameboard__comprobar:hover .gameboard__comprobar__ico svg path, .gameboard__comprobar:focus .gameboard__comprobar__ico svg path {
  fill: white;
  transition: all 0.25s ease-in;
}
.gameboard__comprobar:active, .gameboard__comprobar:focus-within {
  color: white;
  background-color: #6EB118;
  box-shadow: 0px 0px 0px 0px rgba(17, 32, 0, 0.25), 0px 0px 0px 0px rgba(17, 32, 0, 0.15), 0px 0px 0px 0px rgba(17, 32, 0, 0.6);
  transition: all 0.25s ease-in;
}
.gameboard__comprobar:active .gameboard__comprobar__ico svg, .gameboard__comprobar:focus-within .gameboard__comprobar__ico svg {
  fill: white;
  transition: all 0.25s ease-in;
}
@media (hover: none) {
  .gameboard .gameboard__input:has(textarea:focus) ~ button {
    width: 64px;
    height: 64px;
    bottom: 360px;
    left: calc(100% - 38px);
    background-color: rgba(196, 196, 196, 0.5);
    transition: all 0.2s ease-in;
  }
}
@media (max-width: 1024px) and (hover: none) and (orientation: landscape) {
  .gameboard .gameboard__input:has(textarea:focus) ~ button {
    bottom: 360px;
  }
}
@media (max-width: 768px) and (hover: none) and (orientation: landscape) {
  .gameboard .gameboard__input:has(textarea:focus) ~ button {
    bottom: 172px;
  }
}

.banco ~ .gameboard {
  top: calc(12vh + 59px);
}

@media (min-width: 1280px) {
  .banco ~ .gameboard .gameboard__bancopalabras {
    top: calc(12vh + 74px);
    max-height: calc(88vh - 156px);
  }
}
@media (min-width: 1920px) {
  .banco ~ .gameboard .gameboard__bancopalabras {
    top: calc(12vh + 79px);
    max-height: calc(88vh - 109px);
  }
}

.footer {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  bottom: 0;
  width: 100%;
  padding: 0 4px 6px 3px;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .footer {
    padding: 0 5px 8px 4px;
  }
}
.footer__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1024px) {
  .footer__wrapper {
    gap: 6px;
  }
}
.footer__clock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 36px;
  border: 4px solid;
  border-radius: 26px;
  line-height: 1;
  font-size: 20px;
  font-weight: 900;
}
@media (min-width: 1024px) {
  .footer__clock {
    width: 116px;
    height: 52px;
    font-size: 24px;
    border-width: 5px;
  }
}
.footer__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid;
}
@media (min-width: 1024px) {
  .footer__btn {
    width: 52px;
    height: 52px;
  }
}
@media (hover: none) {
  .footer__btn--fullscreen {
    display: none;
  }
}/*# sourceMappingURL=styles.css.map */