@charset "UTF-8";
:root {
  --max-game-width: 25rem;
  --min-game-width: 12rem;
  --game-width: clamp(var(--min-game-width), min(90vw, 40vh), var(--max-game-width));
  --em: calc(var(--game-width) / 25);
  --px: calc(var(--em) / 16);
  --button-transition-speed: 0.2s;
  --answer-height: calc(var(--em) * 2.5);
  --active-answer-height: calc(1.5 * var(--answer-height));
  --active-answer-color: rgba(143, 174, 239, 0.34);
  --progress-bar-width: 5px;
  --progress-outer-border: 2px;
  --progress-inner-border: 2px;
  --min-answer-display-size: 4;
  --max-answer-display-size: 6;
  --switch-scale: 0.8;
  --root-button-font-size: 3.375rem;
  --button-font-size: calc(var(--em) * 3.375);
  --spacer-max: var(--em);
  --spacer-min: calc(var(--spacer-max) * 0.01);
  --figurd-zero: rgb(255, 255, 255);
  --figurd-blue: rgb(146, 181, 255);
  --figurd-warning: #fec76f;
  --figurd-error: #F79256;
  --figurd-success: #B5FF92;
  --figurd-unknown: #a59999;
  --figurd-font-blue: #000000;
  --figurd-font-warning: #FFCC4D;
  --figurd-font-error: #DD2E44;
  --figurd-font-success: #78B159;
  --figurd-font-unknown: #31373D;
  --figurd-play-button: #000000;
  --link-color: inherit;
  --alt-link-color: #121212;
  --link-highlight-color: #92B5FF;
  --unselected-text-color: #777;
  --global-font: "Quicksand";
  --default-font-weight: 500;
  --global-background-color: #ffffff;
  --button-border-color: #000000;
  --alternitive-answer-background-color: #F4F4F4;
  --text-color: #000;
  --alt-text-color: #000;
  --disabled-button-background: #797979;
  --used-button-background: #bbbbbb;
  --disabled-button-text: #bbbbbb;
  --used-button-text: #f2f2f2;
  --button-radius: 0.625rem;
  --button-border-weight: 0.125rem;
  --button-border-weight-hover: calc(2 * var(--button-border-weight));
  --gap-size: calc(var(--px) * 10);
  --input-button-margin: 0.3125rem;
  --input-button-margin-hover: 0rem;
  --input-button-margin-used: 0.625rem;
  --input-button-dropshadow-length: 4px;
  --input-button-dropshadow-color: rgba(0,0,0,0.25);
  --input-button-dropshadow-blur: 1px;
  --input-button-dropshadow-length-disabled: 1px;
  --input-button-dropshadow-color-disabled: rgba(0,0,0,0.25);
  --input-button-dropshadow-blue-disabled: 1px;
  --input-button-dropshadow-length-used: 1px;
  --input-button-dropshadow-color-used: rgba(0,0,0,0.25);
  --input-button-dropshadow-blue-used: 1px;
  --numberic-button-border: #000;
  --numberic-button-background: #92B5FF;
  --numberic-button-text: #000;
  --numberic-button-border-weight: var(--button-border-weight);
  --numberic-button-border-weight-hover: var(--button-border-weight-hover);
  --numberic-button-background-disabled: #D7E3FF ;
  --numberic-button-text-disabled: #616161 ;
  --numberic-button-border-disabled: #8E8E8E;
  --numberic-button-border-weight-disabled: var(--button-border-weight);
  --numberic-button-background-used: #B9BBBF;
  --numberic-button-text-used: #616161;
  --numberic-button-border-used: #8E8E8E;
  --numberic-button-border-weight-used: var(--button-border-weight-hover);
  --game-button-border: #000;
  --game-button-background: #fff;
  --game-button-text: #000;
  --game-button-border-weight: var(--button-border-weight);
  --game-button-border-weight-hover: calc(var(--button-border-weight) * 2);
  --game-button-background-disabled: #EAEAEA ;
  --game-button-text-disabled: #8E8E8E ;
  --game-button-filter-disabled: invert(57%) sepia(4%) saturate(8%) hue-rotate(330deg) brightness(98%) contrast(97%);
  --game-button-border-disabled: #6A6A6A;
  --game-button-border-weight-disabled: var(--button-border-weight);
  --input-button-width: calc(100% - ((var(--margin-amount)) * 2));
  --numberic-button-ratio: 1;
  --numberic-button-ratio-short: 1.3;
  --game-button-ratio: 1.3;
  --game-button-ratio-short: 1.5;
  --submit-button-ratio: 2.35;
  --submit-button-ratio-short: 3.5;
  --status-icon-correct: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' role='img' width='1.5em' height='1.5em'%3E%3Cpath fill='%2378B159' d='M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v28z'/%3E%3C/svg%3E");
  --status-icon-incorrect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' role='img' width='1.5em' height='1.5em'%3E%3Cpath fill='%23DD2E44' d='M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v28z'/%3E%3C/svg%3E");
  --status-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' role='img' width='1.5em' height='1.5em'%3E%3Cpath fill='%23FFCC4D' d='M2.653 35C.811 35-.001 33.662.847 32.027L16.456 1.972c.849-1.635 2.238-1.635 3.087 0l15.609 30.056c.85 1.634.037 2.972-1.805 2.972H2.653z'/%3E%3Cpath fill='%23231F20' d='M15.583 28.953c0-1.333 1.085-2.418 2.419-2.418 1.333 0 2.418 1.085 2.418 2.418 0 1.334-1.086 2.419-2.418 2.419-1.334 0-2.419-1.085-2.419-2.419zm.186-18.293c0-1.302.961-2.108 2.232-2.108 1.241 0 2.233.837 2.233 2.108v11.938c0 1.271-.992 2.108-2.233 2.108-1.271 0-2.232-.807-2.232-2.108V10.66z'/%3E%3C/svg%3E");
  --status-icon-unanswered: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' role='img' width='1.5em' height='1.5em'%3E%3Cpath fill='%2331373D' d='M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v28z'/%3E%3Cpath fill='%23E6E7E8' d='M30 28c0 1.104-.896 2-2 2H8c-1.104 0-2-.896-2-2V8c0-1.104.896-2 2-2h20c1.104 0 2 .896 2 2v20z'/%3E%3C/svg%3E");
  --status-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' role='img' width='1.5em' height='1.5em' %3E%3Cpath fill='%2355ACEE' d='M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v28z'/%3E%3C/svg%3E");
  --cursor-size: 2px;
  --button-add: "+";
  --button-subtract: "-";
  --button-multiply: "×";
  --button-divide: "÷";
  --button-parentheses-open: "(";
  --button-parentheses-close: ")";
  --button-factorial: "!";
  --button-exponent: "^";
  --button-modulus: "%";
  --button-squareRoot: "√";
  --button-clear: "C";
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent !important;
}

* {
  -webkit-tap-highlight-color: transparent !important;
}

button {
  font-family: var(--global-font), sans-serif;
  font-weight: var(--default-font-weight);
  background-color: var(--global-background-color);
}

body {
  font-family: var(--global-font), sans-serif;
  font-weight: var(--default-font-weight);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--global-background-color);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin: 5px 0;
  padding: 0 5px;
  flex: 1;
  max-width: var(--game-width);
}

.spacer {
  flex-grow: 1;
  height: 0;
  min-height: var(--spacer-min);
  max-height: var(--spacer-max);
  overflow: hidden;
}

#progressBar {
  --progress-width: var(--game-width);
  --progress-height: 240px;
  --progress-bar-color: var(--figurd-blue);
  width: var(--progress-width);
  min-height: calc(var(--answer-height) * var(--min-answer-display-size));
  max-height: calc(var(--answer-height) * var(--max-answer-display-size));
  flex-shrink: 1;
  background: linear-gradient(to right, var(--progress-bar-color) 99.99%, transparent), linear-gradient(to bottom, var(--progress-bar-color) 99.99%, transparent), linear-gradient(to right, var(--progress-bar-color) 99.99%, transparent), linear-gradient(to bottom, var(--progress-bar-color) 99.99%, transparent);
  background-size: 100% var(--progress-bar-width), var(--progress-bar-width) 100%, 100% var(--progress-bar-width), var(--progress-bar-width) 100%;
  background-position: 0 0, 100% 0, 0 100%, 0 0;
  background-repeat: no-repeat;
  animation: progress 1s linear paused;
  animation-delay: 0s;
  transition: background-position var(--button-transition-speed) ease-in-out, background-size var(--button-transition-speed) ease-in-out;
  border: var(--progress-outer-border) var(--button-border-color) solid;
}

.answer-display {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  max-height: calc(100% - (var(--progress-bar-width) + var(--progress-inner-border)) * 2);
  flex-direction: column;
  border: var(--progress-inner-border) var(--button-border-color) solid;
  margin: var(--progress-bar-width);
  overflow-y: scroll;
}

.answer-item:nth-child(odd) {
  background-color: var(--alternitive-answer-background-color);
}

.answer-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: var(--answer-height);
  min-height: var(--answer-height);
  font-size: calc(var(--em) * 1.5);
  background: var(--global-background-color);
  cursor: pointer;
  color: var(--unselected-text-color);
  transition: width var(--button-transition-speed) ease-in-out, height var(--button-transition-speed) ease-in-out, min-height var(--button-transition-speed) ease-in-out, color var(--button-transition-speed) ease-in-out, background-color var(--button-transition-speed) ease-in-out;
}
.answer-item .cursor {
  height: 0;
  width: 0;
  border-bottom: none;
  transition: width var(--button-transition-speed) ease-in-out, min-width var(--button-transition-speed) ease-in-out;
}

.answer-item.active {
  height: var(--active-answer-height);
  min-height: var(--active-answer-height);
  cursor: default;
  color: var(--text-color);
  background-color: var(--active-answer-color);
}
.answer-item.active .equation {
  color: var(--figurd-font-blue);
  margin-right: 0;
}
.answer-item.active .cursor {
  width: calc(var(--em) * 0.6);
  margin: 0 calc(var(--px) * 2);
  height: calc(var(--em) * 1.2);
  animation: flashing-cursor 1s linear calc(var(--button-transition-speed) - 0.1s) infinite;
}

.status {
  margin: 0 0.25em;
}

.target {
  margin: 0 0.25em;
  height: 1em;
}

.equals {
  margin: 0 0.25em;
  height: 1em;
}

.equation {
  margin: 0 0.25em;
  width: fit-content;
  max-width: 100%;
  height: 1em;
  text-align: end;
  overflow: visible;
  text-wrap: nowrap;
  border-bottom: var(--button-border-color) 0 solid;
  transition: border var(--button-transition-speed) ease-in-out, width var(--button-transition-speed) ease-in-out, color var(--button-transition-speed) ease-in-out, height var(--button-transition-speed) ease-in-out, min-width var(--button-transition-speed) ease-in-out;
}

.answer-item.correct .equation {
  color: var(--figurd-font-success);
}
.answer-item.correct .status {
  content: var(--status-icon-correct);
}
.answer-item.incorrect .equation {
  color: var(--figurd-font-error);
}
.answer-item.incorrect .status {
  content: var(--status-icon-incorrect);
}
.answer-item.unanswered .equation {
  color: var(--figurd-font-unknown);
}
.answer-item.unanswered .status {
  content: var(--status-icon-unanswered);
}
.answer-item.invalid .equation {
  color: var(--figurd-font-warning);
}
.answer-item.invalid .status {
  content: var(--status-icon-invalid);
}
.answer-item.valid .equation {
  color: var(--figurd-font-blue);
}
.answer-item .status {
  display: flex;
  align-items: center;
}
.answer-item .status {
  display: block;
  margin: auto auto auto 0.25em;
  height: 1em;
  text-align: left;
}

.scoreicon.correct {
  content: var(--status-icon-correct);
}
.scoreicon.incorrect {
  content: var(--status-icon-incorrect);
}
.scoreicon.unanswered {
  content: var(--status-icon-unanswered);
}
.scoreicon.invalid {
  content: var(--status-icon-invalid);
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: var(--button-radius);
  overflow: hidden;
  filter: drop-shadow(var(--input-button-dropshadow-length) var(--input-button-dropshadow-length) var(--input-button-dropshadow-blur) var(--input-button-dropshadow-color));
  transition: background-color var(--button-transition-speed) ease-in-out, padding var(--button-transition-speed) ease-in-out, border-radius var(--button-transition-speed) ease-in-out, color var(--button-transition-speed) ease-in-out, margin var(--button-transition-speed) ease-in-out;
}

#gameContainer {
  display: flex;
  flex-direction: column;
  height: 500px;
  flex-shrink: 10;
}

#operatorBox, #numberBox, #controlBox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  height: 100%;
  width: 100%;
  padding-left: 0;
  gap: var(--gap-size);
  --button-width: calc((var(--game-width) - (var(--gap-size) * 3)) / 4);
  flex-shrink: 20;
  max-height: calc(var(--button-width) / var(--game-button-ratio));
}

.submit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
  --button-width: calc((var(--game-width) - (var(--gap-size) * 1)) / 2);
  max-height: calc(var(--button-width) / var(--submit-button-ratio));
  height: 100%;
  width: 100%;
  gap: var(--gap-size);
}

#numberBox {
  max-height: calc(var(--button-width) / var(--numberic-button-ratio));
}

#operatorBox {
  --operator-rows: 2;
  max-height: calc(var(--button-width) / var(--game-button-ratio) * var(--operator-rows) + var(--gap-size) * (var(--operator-rows) - 1));
}

#numberBox .input-button {
  --font-size: calc(var(--button-font-size) * 1);
  font-size: var(--font-size);
  --padding-amount: 5px;
  min-height: calc(var(--button-width) / var(--numberic-button-ratio-short));
  --button-border-weight: var(--numberic-button-border-weight);
  --button-text-color: var(--numberic-button-text);
  --button-background-color: var(--numberic-button-background);
  --button-border-color: var(--numberic-button-border);
  --initial-offset-amount: 0px;
}

.input-button {
  --padding-amount: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  align-self: stretch;
  --margin-amount: var(--input-button-margin);
  margin: var(--margin-amount);
  padding: var(--padding-amount);
  --font-size: calc(var(--button-font-size) * 1);
  font-size: var(--font-size);
  min-height: calc(var(--button-width) / var(--game-button-ratio-short));
  --border-radius: var(--button-radius);
  --button-border-weight: var(--game-button-border-weight);
  --button-text-color: var(--game-button-text);
  --button-background-color: var(--game-button-background);
  --button-border-color: var(--game-button-border);
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  border: var(--button-border-weight) var(--button-border-color) solid;
  border-radius: var(--border-radius);
  --initial-offset-amount: 0px;
  --offset-amount: var(--initial-offset-amount);
  padding-bottom: calc(var(--padding-amount) + var(--offset-amount));
  padding-top: calc(var(--padding-amount) - var(--offset-amount));
  filter: drop-shadow(var(--input-button-dropshadow-length) var(--input-button-dropshadow-length) var(--input-button-dropshadow-blur) var(--input-button-dropshadow-color));
  transition: margin var(--button-transition-speed) ease-in-out, aspect-ratio var(--button-transition-speed) ease-in-out, background-color var(--button-transition-speed) ease-in-out, border-radius var(--button-transition-speed) ease-in-out, color var(--button-transition-speed) ease-in-out, drop-shadow var(--button-transition-speed) ease-in-out, min-height var(--button-transition-speed) ease-in-out;
}

.operator-button {
  --font-size: calc(var(--button-font-size) * 1.296);
  font-weight: 550;
}

.input-button:hover {
  --button-border-weight: var(--game-button-border-weight-hover);
  --margin-amount: var(--input-button-margin-hover);
}

#numberBox .input-button:hover {
  --button-border-weight: var(--numberic-button-border-weight-hover);
}

.under-answer-row {
  display: flex;
  justify-content: space-between;
  align-content: center;
  font-size: calc(var(--em) * 1.5);
  width: 100%;
}

#stopwatch {
  min-width: 81px;
  width: fit-content;
  gap: 3px;
}

#howToPlayBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 5px;
}
#howToPlayBtn .emoji {
  padding-top: 0.125em;
}

.link-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

button {
  cursor: pointer;
  font-weight: 900;
}

button:disabled {
  cursor: not-allowed;
}

.input-button.buttonDisabled, .input-button.buttonDisabled:hover {
  color: var(--game-button-text-disabled);
  --button-border-weight: var(--game-button-border-weight-disabled);
  background-color: var(--game-button-background-disabled);
  border-color: var(--game-button-border-disabled);
  --input-button-dropshadow-length: var(--input-button-dropshadow-length-disabled);
  --input-button-dropshadow-color: var(--input-button-dropshadow-color-disabled);
  --input-button-dropshadow-blur: var(--input-button-dropshadow-blue-disabled);
  cursor: not-allowed;
  --margin-amount: var(--input-button-margin);
}

#numberBox .input-button.buttonDisabled, #numberBox .input-button.buttonDisabled:hover {
  color: var(--numberic-button-text-disabled);
  --button-border-weight: var(--numberic-button-border-weight-disabled);
  background-color: var(--numberic-button-background-disabled);
  border-color: var(--numberic-button-border-disabled);
}

#numberBox .input-button.buttonUsed, #numberBox .input-button.buttonUsed:hover {
  color: var(--numberic-button-text-used);
  --button-border-weight: var(--numberic-button-border-weight-used);
  background-color: var(--numberic-button-background-used);
  border-color: var(--numberic-button-border-used);
  --margin-amount: var(--input-button-margin-used);
  min-height: calc(var(--button-width) / var(--numberic-button-ratio-short) - (var(--margin-amount)));
  --input-button-dropshadow-length: var(--input-button-dropshadow-length-used);
  --input-button-dropshadow-color: var(--input-button-dropshadow-color-used);
  --input-button-dropshadow-blur: var(--input-button-dropshadow-blue-used);
  cursor: default;
}

.modal-container, #loading {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  height: fit-content;
  justify-content: flex-start;
  align-items: center;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  justify-content: flex-start;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
}

#loading {
  background-color: var(--global-background-color);
  z-index: 100;
  height: 100vh;
  height: 100dvh;
}

.overlay-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(var(--max-game-width), 100vw);
  height: 100%;
  justify-content: flex-start;
  align-items: center;
}

.modal-spacer {
  max-height: 6.6em;
  height: 100%;
  flex-shrink: 5;
}

.expanded-spacer {
  height: 1em;
  max-height: 1em;
  flex-shrink: 5;
  min-height: 0.25em;
}

.modal-content {
  display: flex;
  flex-direction: column;
  --padding-amount: 20px;
  width: calc(100% - var(--padding-amount) * 2);
  max-width: 21.2rem;
  height: fit-content;
  max-height: 100vh;
  max-height: 100dvh;
  flex-shrink: 0;
  overflow: auto;
  margin: 0 0;
  padding: 0 var(--padding-amount);
  background-color: var(--global-background-color);
  border: 1px solid var(--button-border-color);
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  transition: margin var(--button-transition-speed) ease-in-out, width var(--button-transition-speed) ease-in-out, height var(--button-transition-speed) ease-in-out;
}
.modal-content h2, .modal-content h3 {
  margin: 5px 0;
}
.modal-content p {
  margin: 7px 0;
}

.modal-padding {
  height: var(--padding-amount);
  min-height: var(--padding-amount);
}

.normal-pointer {
  cursor: default;
}

.hidden {
  display: none !important;
}

.submit-button {
  --margin: var(--input-button-margin);
  margin: var(--margin);
  min-height: calc(var(--button-width) / var(--submit-button-ratio-short));
  justify-self: stretch;
  align-self: stretch;
  --font-size: calc(var(--button-font-size) * 0.6481);
  font-size: var(--font-size);
  padding: 10px 0;
  border: var(--button-border-weight) solid var(--button-border-color);
  color: var(--alt-text-color);
  filter: drop-shadow(var(--input-button-dropshadow-length) var(--input-button-dropshadow-length) var(--input-button-dropshadow-blur) var(--input-button-dropshadow-color));
  transition: background-color var(--button-transition-speed) ease-in-out, border-radius var(--button-transition-speed) ease-in-out, color var(--button-transition-speed) ease-in-out, -webkit-text-stroke var(--button-transition-speed) ease-in-out, text-shadow var(--button-transition-speed) ease-in-out, padding var(--button-transition-speed) ease-in-out, margin var(--button-transition-speed) ease-in-out;
}

.submit-button:hover {
  --margin: var(--input-button-margin-hover);
  --button-border-weight: var(--button-border-weight-hover);
}

.equals-button {
  background-color: var(--figurd-success);
  --font-size: calc(var(--button-font-size) * 1.185);
  font-size: var(--font-size);
}

.figurd-button {
  background-color: var(--figurd-zero);
  --text-shadow-color: var(--button-border-color);
  --text-shadow-thickness: 1px;
  text-shadow: 1px 0 var(--text-shadow-color), -1px 0 var(--text-shadow-color), 0 1px var(--text-shadow-color), 0 -1px var(--text-shadow-color), 0.5px 0.5px var(--text-shadow-color), -0.5px -0.5px var(--text-shadow-color), 0.5px -0.5px var(--text-shadow-color), -0.5px 0.5px var(--text-shadow-color);
}

@supports (-webkit-text-stroke: 1px black) {
  .figurd-button {
    -webkit-text-stroke: var(--text-shadow-thickness) var(--text-shadow-color);
    text-shadow: none;
  }
}
.figurd-button:hover {
  background-color: var(--figurd-blue) !important;
  --text-shadow-color: var(--alt-text-color);
}

.button-map {
  display: grid;
  grid-template-columns: 1fr 3fr;
  justify-content: flex-start;
  text-align: start;
  align-items: center;
  width: 90%;
  padding: 7px 0;
  gap: 5px;
}

.button-no-hover {
  border: var(--button-border-weight) solid var(--button-border-color);
  background-color: var(--global-background-color);
  font-size: 1.2em;
  cursor: default;
  --width: 2em;
  --ratio: var(--game-button-ratio);
  --ratio-short: var(--game-button-ratio-short);
  width: var(--width);
  height: calc(var(--width) / var(--ratio));
  min-height: calc(var(--width) / var(--ratio-short));
  margin: 0;
  padding: 0;
  filter: none;
  font-weight: 700;
  justify-self: end;
}

.button-no-hover.submit {
  font-size: 2em;
  --width: 4em;
  --ratio: var(--submit-button-ratio);
  --ratio-short: var(--submit-button-ratio-short);
  justify-self: center;
}

.button-no-hover.equals {
  --width: 2em;
  justify-self: end;
}

.value-check {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  flex-direction: row;
  gap: 10px;
}
.value-check .emoji {
  font-size: 0.8em;
  height: 0.8em;
}
.value-check p, .value-check img {
  margin: 0;
  padding: 0;
}
.value-check svg {
  height: 1em;
  display: inline;
}

.submit-result {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0.5em 0;
}
.submit-result p, .submit-result div, .submit-result img {
  margin: 0;
  padding: 0;
}

.game-submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: var(--button-radius);
  padding: 10px;
  margin: 0;
  min-width: 60%;
  max-width: 95%;
  min-height: 2em;
  height: 3em;
  font-size: 1.5em;
  border: var(--button-border-weight) solid var(--button-border-color);
  color: var(--alt-text-color);
}

.game-submit-button:hover {
  --button-border-weight: var(--button-border-weight-hover);
}

#game-submit .overlay-panel .modal-content {
  font-size: clamp(0.75em, 3vh, 1em);
}

#how-to-play .overlay-panel .modal-content {
  font-size: clamp(0.7em, 1.8vh, 1em);
}

#submit-button {
  background-color: var(--figurd-blue);
}

#close-submit {
  background-color: var(--figurd-success);
}

.lets-play {
  margin: 10px 0;
  padding: 5px 10px;
  border: var(--button-border-weight) solid var(--button-border-color);
  background-color: var(--figurd-success);
  min-height: 2em;
}

.lets-play:hover {
  --button-border-weight: var(--button-border-weight-hover);
}

.title {
  font-size: clamp(var(--em) * 2.5, 6vh, var(--em) * 3.75);
  text-align: left;
  align-self: flex-start;
  line-height: 1em;
  margin: 0;
  padding: 0;
  font-weight: 700;
  transition: margin var(--button-transition-speed) ease-in-out;
}

.title-buttons {
  padding-top: 0.1em;
  align-items: flex-end;
  font-size: calc(var(--em) * 1);
}

.title-buttons > .text-button {
  font-size: calc(var(--em) * 1.25);
}

.timer-learn-line {
  font-size: calc(var(--em) * 1.5);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.score-font-size {
  font-size: calc(var(--em) * 1);
  margin: 0.6em 0;
}

.button-add:before {
  content: var(--button-add);
}

.button-subtract:before {
  content: var(--button-subtract);
}

.button-add, .button-multiply, .button-divide {
  --initial-offset-amount: 3px;
}

.button-subtract {
  --font-size: calc(var(--button-font-size) * 1.666);
  --initial-offset-amount: 5px;
  font-weight: 460;
}

.button-multiply:before {
  content: var(--button-multiply);
}

.button-divide:before {
  content: var(--button-divide);
}

.button-parentheses-open:before {
  content: var(--button-parentheses-open);
}

.button-parentheses-close:before {
  content: var(--button-parentheses-close);
}

.button-parentheses-open, .button-parentheses-close {
  --initial-offset-amount: 5px;
}

.button-parentheses-open {
  grid-column: 2;
}

.button-parentheses-close {
  grid-column: 3;
}

.button-factorial:before {
  content: var(--button-factorial);
}

.button-exponent:before {
  content: var(--button-exponent);
}

.button-modulus:before {
  content: var(--button-modulus);
}

.button-squareRoot:before {
  content: var(--button-squareRoot);
}

.button-clear:before {
  content: var(--button-clear);
}

.button-clear {
  --initial-offset-amount: 1px;
}

.button-delete {
  grid-column: 4;
}

.input-button.buttonDisabled img {
  filter: var(--game-button-filter-disabled);
}

#numberBox .input-button.buttonDisabled img {
  filter: unset;
}

a {
  color: var(--alt-link-color);
  text-decoration: none;
}

.text-button {
  border: none;
  color: var(--link-color);
  font-weight: var(--default-font-weight);
}

a, .text-button {
  transition: color var(--button-transition-speed) ease-in-out;
}

a:hover, .text-button:hover {
  color: var(--link-highlight-color);
}

#shareBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: var(--button-radius);
  padding: 10px;
  --margin: calc(5px - var(--button-border-weight));
  margin: var(--margin);
  width: calc(80% - (var(--margin) + var(--button-border-weight)) * 2);
  min-width: max-content;
  gap: 10px;
  font-size: calc(var(--em) * 1.5);
  border: var(--button-border-weight) solid var(--button-border-color);
  color: var(--alt-text-color);
  background-color: var(--figurd-success);
  transition: none;
}

#shareBtn:hover {
  --button-border-weight: var(--button-border-weight-hover);
}

#resultTitle {
  margin: 0;
  justify-content: space-between;
  width: 100%;
}

#resultTitle p, #gameResult p {
  margin: 0;
}

#endGameContainer {
  width: 100%;
}

#gameResult {
  width: fit-content;
}

#endGameContainer h2 {
  margin-bottom: 0.5em;
}

#resultList {
  font-size: calc(var(--em) * 1.5);
  text-align: center;
  margin: 0;
  line-height: 0.8em;
}

#resultList > span {
  font-size: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.ad-banner img {
  border: 1px solid var(--button-border-color);
  width: 100%;
  display: block;
  height: auto;
}

/* Progress animation */
@keyframes progress {
  0% {
    background-position: calc(-1 * var(--progress-width)) 0, 100% calc(-1 * var(--progress-height)), var(--progress-width) 100%, 0 var(--progress-height);
  }
  25% {
    background-position: 0 0, 100% calc(-1 * var(--progress-height)), var(--progress-width) 100%, 0 var(--progress-height);
  }
  50% {
    background-position: 0 0, 100% 0, var(--progress-width) 100%, 0 var(--progress-height);
  }
  75% {
    background-position: 0 0, 100% 0, 0 100%, 0 var(--progress-height);
  }
  100% {
    background-position: 0 0, 100% 0, 0 100%, 0 0;
  }
}
@keyframes flashing-cursor {
  0% {
    border-bottom: none;
  }
  50% {
    border-bottom: var(--button-border-color) var(--cursor-size) solid;
  }
  100% {
    border-bottom: none;
  }
}
.emoji {
  font-size: 1em;
  height: 1em;
}

.row-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.column-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-space-evenly {
  justify-content: space-evenly;
}

.justify-self-start {
  justify-self: flex-start;
}

.justify-self-end {
  justify-self: flex-end;
}

.justify-self-center {
  justify-self: center;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.full-width {
  width: 100%;
}

.gap10 {
  gap: 10px;
}

.gap5 {
  gap: 5px;
}

.underline {
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}

.circle {
  border-radius: 50%;
  border: black 2px solid;
  height: 1.1em;
  width: 1.1em;
  display: inline-block;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: calc(60px * var(--switch-scale));
  height: calc(34px * var(--switch-scale));
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: calc(26px * var(--switch-scale));
  width: calc(26px * var(--switch-scale));
  left: calc(4px * var(--switch-scale));
  bottom: calc(4px * var(--switch-scale));
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--figurd-blue);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--figurd-blue);
}

input:checked + .slider:before {
  -webkit-transform: translateX(calc(26px * var(--switch-scale)));
  -ms-transform: translateX(calc(26px * var(--switch-scale)));
  transform: translateX(calc(26px * var(--switch-scale)));
}

/* Rounded sliders */
.slider.round {
  border-radius: calc(34px * var(--switch-scale));
}

.slider.round:before {
  border-radius: 50%;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}