@font-face {
  font-family: OpenDyslexic3Regular;
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/OpenDyslexic3-Regular.ttf");
}
@font-face {
  font-family: StoriaSansRegular;
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/StoriaSans-Regular.ttf");
}
[data-font=openDyslexic] {
  --font-family: OpenDyslexic3Regular, serif;
  --scale: 0.07;
  --top: -4rem;
  --bottom: -1rem;
  --svg-positionOld: -1px, 4px;
  --svg-positionNew: 2px, 4px;
  --save-width: 221px;
}

[data-font=storiaSans] {
  --font-family: StoriaSansRegular, serif;
  --scale: 0.09;
  --top: -1rem;
  --bottom: -5.5rem;
  --svg-positionOld: 1.5px, 4px;
  --svg-positionNew: 0px, 4px;
  --save-width: 190px;
}

[data-theme=dark] {
  --mainColor: #162555;
  --darkMainColor: #000000;
  --lightMainColor: #2b48a6;
  --secondaryColor: #15a29b;
  --darkSecondaryColor: #094845;
  --highlightColor: #c4e746;
  --backgroundColor: #0f131a;
  --textColor: #92d1e2;
  --hLTextColor: --backgroundColor;
  --linkColor: #9eafe6;
  --borderColor: #bebecb;
  --iconColor: --textColor;
  --errorTextColor: #000000;
  --error: #bfbfbf;
  --errorBorderColor: #ff3c3c;
  --errorButtonTextColor: #ffffff;
  --errorButtonColor: #000000;
  --errorButtonBorderColor: #993333;
  --alertColor: #ffffff;
  --alertBackground: #96880a;
  --alertButtonColor: #ffffff;
  --alertButtonBackground: #993333;
}

[data-theme=light] {
  --mainColor: #ac1515;
  --darkMainColor: #4e0909;
  --lightMainColor: #e73c3c;
  --secondaryColor: #9696ab;
  --darkSecondaryColor: #62627a;
  --highlightColor: #f9d2d2;
  --backgroundColor: #d0dfeb;
  --textColor: #1b2731;
  --hLTextColor: --backgroundColor;
  --linkColor: #1b3127;
  --borderColor: #4b4b5d;
  --iconColor: --textColor;
  --errorTextColor: #ffffff;
  --error: #000000;
  --errorBorderColor: #ff3c3c;
  --errorButtonTextColor: #000000;
  --errorButtonColor: #ffffff;
  --errorButtonBorderColor: #993333;
  --alertColor: #000000;
  --alertBackground: #dfe072;
  --alertButtonColor: #ffffff;
  --alertButtonBackground: #c52c2c;
}

[data-theme=high-contrast] {
  --mainColor: #ffffff;
  --darkMainColor: #ffffff;
  --lightMainColor: #ffffff;
  --secondaryColor: #ffffff;
  --darkSecondaryColor: #ffffff;
  --highlightColor: #ffffff;
  --backgroundColor: #000000;
  --textColor: #000000;
  --hLTextColor: --backgroundColor;
  --linkColor: #000000;
  --borderColor: #ffffff;
  --iconColor: --textColor;
  --errorTextColor: #000000;
  --error: #000000;
  --errorBorderColor: #ffffff;
  --errorButtonTextColor: #000000;
  --errorButtonColor: #ffffff;
  --errorButtonBorderColor: #ffffff;
  --alertColor: #000000;
  --alertBackground: #ffffff;
  --alertButtonColor: #000000;
  --alertButtonBackground: #ffffff;
}

:root {
  --x: 50;
  --y: 50;
  --dont-x: 50;
  --dont-y: 50;
  --bt-container-x: 0px;
  --bt-container-y: 0px;
  --alpha: rgba(0, 0, 0, 0);
  font-size: calc(1rem * var(--scale));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-weight: normal;
  font-style: normal;
  margin: 0px;
  padding: 0px;
  color: var(--textColor);
  background-color: var(--backgroundColor);
}

p {
  margin: 0px;
  padding: 0px;
}

button {
  margin: 0px;
  padding: 0px;
  border: none;
  cursor: pointer;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#gameBody {
  position: relative;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
@supports (height: 1dvw) {
  #gameBody {
    height: 100dvh;
  }
}

#dontTap {
  font-family: var(--font-family);
  font-size: 23rem;
  line-height: 27rem;
  font-weight: normal;
  position: absolute;
  border-radius: 25px;
  padding: 10px 20px;
  width: auto;
  height: auto;
  color: var(--textColor);
  background-color: var(--alpha);
}
#dontTap::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
#dontTap::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}
#dontTap:focus, #dontTap:hover {
  color: var(--highlightColor);
  background-color: var(--mainColor);
}

#dontTap {
  top: 0px;
  left: 0px;
  transform: translate(calc(-50% + var(--dont-x) * 1vw), calc(-50% + var(--dont-y) * 1vh));
}

#fake_dontTap {
  font-family: var(--font-family);
  font-size: 23rem;
  line-height: 27rem;
  font-weight: normal;
  position: absolute;
  border-radius: 25px;
  padding: 10px 20px;
  width: auto;
  height: auto;
  color: var(--textColor);
  background-color: var(--alpha);
}
#fake_dontTap::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
#fake_dontTap::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}
#fake_dontTap:focus, #fake_dontTap:hover {
  z-index: 100;
  color: var(--highlightColor);
  background-color: var(--mainColor);
}

#fake_dontTap {
  top: 0px;
  left: 0px;
  transform: translate(calc(-50% + var(--dont-x) * 1vw), calc(-50% + var(--dont-y) * 1vh));
}

#btContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  transform: translate(var(--bt-container-x), var(--bt-container-y));
}

@supports (width: 1dvw) {
  #dontTap {
    transform: translate(calc(-50% + var(--dont-x) * 1dvw), calc(-50% + var(--dont-y) * 1dvh));
  }
  #fake_dontTap {
    transform: translate(calc(-50% + var(--dont-x) * 1dvw), calc(-50% + var(--dont-y) * 1dvh));
  }
}
[id^=choice] {
  font-family: var(--font-family);
  font-size: 23rem;
  line-height: 27rem;
  font-weight: 700;
  width: fit-content;
  border-radius: 25px;
  padding: 10px 20px;
  color: var(--textColor);
  background-color: var(--alpha);
}
[id^=choice]::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
[id^=choice]::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}
[id^=choice]:focus, [id^=choice]:hover {
  z-index: 100;
  color: var(--highlightColor);
  background-color: var(--mainColor);
}

#buttonIndex {
  display: none;
}

#install {
  display: none;
}

#settings-menu {
  display: none;
  position: absolute;
  place-items: center;
  top: 0px;
  left: 0px;
  transform: translate(calc(-50% + var(--x) * 1vw), calc(-50% + var(--y) * 1vh));
  width: min-content;
  height: auto;
  background-color: var(--alpha);
}

#settings {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  margin: auto;
  width: 55px;
  height: 55px;
  background-color: var(--alpha);
  border-radius: 22px;
  fill: var(--textColor);
}
#settings svg {
  width: 55px;
  height: 55px;
}
#settings:focus, #settings:hover {
  fill: var(--highlightColor);
}

#updateIcon {
  stroke: var(--secondaryColor);
}

.svgText {
  font-family: var(--font-family);
  font-size: 14rem;
  line-height: 18rem;
  fill: var(--secondaryColor);
}
.svgText::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
.svgText::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}

.svgNew {
  transform: translate(var(--svg-positionNew));
}

.svgOld {
  transform: translate(var(--svg-positionOld));
}

#menuItems {
  display: grid;
  grid-auto-rows: 0.5fr;
  margin: 0px;
  padding: 10px;
  width: fit-content;
  height: min-content;
  border-radius: 25px;
  background-color: var(--lightMainColor);
}
#menuItems button {
  font-family: var(--font-family);
  font-weight: 700;
  font-style: normal;
  font-size: 18rem;
  line-height: 22rem;
  margin: auto;
  padding: 10px 20px;
  border-radius: 20px;
  width: 100%;
  height: min-content;
  color: var(--highlightColor);
  background-color: var(--alpha);
}
#menuItems button::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
#menuItems button::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}
#menuItems button:focus, #menuItems button:hover {
  color: var(--highlightColor);
  background-color: var(--darkMainColor);
}

#menuItem01Options,
#menuItem02Options,
#menuItem03Options {
  display: grid;
  grid-auto-flow: column;
}

.menuHeader {
  font-size: 18rem;
  line-height: 22rem;
  font-weight: 700;
  text-align: center;
  margin: auto;
  padding: 10px;
}
.menuHeader::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
.menuHeader::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}

#fontsList {
  display: none;
}

#themesList {
  display: none;
}

#fontsList,
#themesList {
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(calc(-50% + var(--x) * 1vw), calc(-50% + var(--y) * 1vh));
  grid-auto-rows: max-content;
  gap: 5px;
  margin: 0px;
  padding: 10px;
  width: fit-content;
  height: min-content;
  border-radius: 25px;
  background-color: var(--lightMainColor);
}
#fontsList button,
#themesList button {
  font-family: var(--font-family);
  font-weight: normal;
  font-style: normal;
  font-size: 14rem;
  line-height: 18rem;
  margin: 0px;
  padding: 10px 20px;
  border-radius: 20px;
  width: auto;
  height: calc(14 * var(--scale))rem;
  color: var(--highlightColor);
  background-color: var(--mainColor);
}
#fontsList button::before,
#themesList button::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
#fontsList button::after,
#themesList button::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}
#fontsList button:focus, #fontsList button:hover,
#themesList button:focus,
#themesList button:hover {
  color: var(--highlightColor);
  background-color: var(--darkMainColor);
}

#themesListItems {
  margin: auto;
}

#themesListItems,
#fontsListItems {
  display: grid;
  grid-auto-flow: row;
  gap: 5px 0px;
}

#saveDataLists {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(calc(-50% + var(--x) * 1vw), calc(-50% + var(--y) * 1vh));
  grid-auto-flow: row;
  grid-template-rows: max-content 1fr;
  gap: 5px;
  margin: 0px;
  padding: 10px;
  width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  border-radius: 0px;
  background-color: var(--lightMainColor);
}
#saveDataLists ul {
  display: grid;
  grid-auto-rows: min-content;
  gap: 10px 0px;
}
#saveDataLists li {
  display: grid;
  grid-auto-flow: row;
  gap: 2px 0px;
}
#saveDataLists button {
  font-family: var(--font-family);
  font-weight: normal;
  font-style: normal;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 5px 0px;
  margin: 0px;
  padding: 10px 20px;
  width: auto;
  height: calc(14 * var(--scale))rem;
  color: var(--highlightColor);
  background-color: var(--mainColor);
}
#saveDataLists button:focus, #saveDataLists button:hover {
  color: var(--highlightColor);
  background-color: var(--darkMainColor);
}
#saveDataLists button p {
  font-size: 14rem;
  line-height: 18rem;
}
#saveDataLists button p::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
#saveDataLists button p::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}

.br {
  border-radius: 20px;
}

.br-u {
  border-radius: 20px 20px 0px 0px;
}

.br-l {
  border-radius: 0px 0px 0px 0px;
}

.br-d {
  border-radius: 0px 0px 20px 20px;
}

.autoSaveName,
.manualSaveName {
  overflow-x: auto;
  margin: auto;
  padding: 0px;
  width: var(--save-width);
  height: auto;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@supports (overflow-x: clip) {
  .autoSaveName,
.manualSaveName {
    overflow-x: clip;
  }
}
.autoSaveDate,
.manualSaveDate {
  margin: auto;
  width: var(--save-width);
}

#manualSaveListContainer {
  overflow: hidden;
  position: relative;
}

#manualSaveList {
  overflow-y: auto;
  height: 100%;
}

#savesContainer {
  overflow: hidden;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: max-content 1fr;
  gap: 5px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: calc(100% - 0px);
  background-color: var(--lightMainColor);
}

.container {
  position: relative;
}

.svgIcons {
  display: none;
}

.headerGroup {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content;
  gap: 5px;
  margin: 0px;
  padding: 0px;
  width: auto;
  height: auto;
}

.m-fix {
  margin: 0px auto 0px 9vw;
}

.hide {
  display: none;
}

.show-g {
  display: grid;
}

.show-f {
  display: flex;
}

#popupWindow {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(calc(-50% + var(--x) * 1vw), calc(-50% + var(--y) * 1vh));
  margin: 0px;
  padding: 10px;
  border-radius: 10px;
  width: auto;
  height: auto;
}
#popupWindow button {
  margin: 0px;
  padding: 5px 10px;
  border-radius: 5px;
}

.popupText {
  font-size: 14rem;
  line-height: 18rem;
}
.popupText::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
.popupText::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}

#popupTitle {
  font-size: 18rem;
  line-height: 22rem;
  text-align: center;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
}
#popupTitle::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
#popupTitle::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}

#popupButtons {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 5px;
  width: 100%;
  height: 100%;
}

.error {
  color: var(--errorTextColor);
  background-color: var(--error);
  border: 2px solid var(--errorBorderColor);
}
.error button {
  color: var(--errorButtonTextColor);
  background-color: var(--errorButtonColor);
  border: 2px solid var(--errorButtonBorderColor);
  transition: all 0.2s ease-in-out;
}
.error button:hover {
  border: 5px solid var(--errorButtonBorderColor);
}
.error #popupTitle {
  color: var(--errorButtonTextColor);
  background-color: var(--errorButtonColor);
}

.message {
  color: var(--textColor);
  background-color: var(--lightMainColor);
}
.message button {
  color: var(--textColor);
  background-color: var(--borderColor);
}

.alert {
  color: var(--alertColor);
  background-color: var(--alertBackground);
}
.alert button {
  display: flex;
  justify-content: center;
  font-family: var(--font-family);
  color: var(--alertButtonColor);
  background-color: var(--alertButtonBackground);
}
.alert button:focus, .alert button:hover {
  color: var(--highlightColor);
  background-color: var(--mainColor);
}
.alert button p {
  font-size: 14rem;
  line-height: 18rem;
}
.alert button p::before {
  content: "";
  margin-bottom: var(--top);
  display: table;
}
.alert button p::after {
  content: "";
  margin-top: var(--bottom);
  display: table;
}

.yes:focus, .yes:hover {
  color: var(--highlightColor);
  background-color: var(--mainColor);
}

@supports (width: 1dvh) {
  #saveDataLists {
    min-height: 100dvh;
    max-height: 100dvh;
  }
  #settings-menu {
    transform: translate(calc(-50% + var(--y) * 1dvw), calc(-50% + var(--x) * 1dvh));
  }
  #fontsList,
#themesList {
    transform: translate(calc(-50% + var(--y) * 1dvw), calc(-50% + var(--x) * 1dvh));
  }
  #saveDataLists {
    transform: translate(calc(-50% + var(--y) * 1dvw), calc(-50% + var(--x) * 1dvh));
  }
  #popupWindow {
    transform: translate(calc(-50% + var(--y) * 1dvw), calc(-50% + var(--x) * 1dvh));
  }
}
@media screen and (min-width: 450px) {
  #saveDataLists {
    width: auto;
    min-height: auto;
    max-height: 100vh;
    border-radius: 20px;
  }
  @supports (width: 1dvh) {
    #saveDataLists {
      max-height: 100dvh;
    }
  }
  #saveDataLists ul {
    gap: 5px 0px;
  }
  #saveDataLists li {
    display: grid;
    grid-auto-flow: column;
    gap: 0px 2px;
  }
  .br-u {
    border-radius: 20px 0px 0px 20px;
  }
  .br-l {
    border-radius: 0px 0px 0px 0px;
  }
  .br-d {
    border-radius: 0px 20px 20px 0px;
  }
  #settings {
    width: 75px;
    height: 75px;
  }
  #settings svg {
    width: 75px;
    height: 75px;
  }
  #savesContainer {
    grid-auto-flow: column;
    grid-template-rows: initial;
    grid-auto-columns: max-content;
    padding: 10px;
  }
  #themesListItems,
#fontsListItems {
    display: grid;
    grid-auto-flow: column;
    gap: 0px 5px;
  }
}