/* TODO: The main body of the puzzle should be centered on the page. 
Calculate the height of the keyboard and do the subtraction to know how 
much padding to put at the top */
:root {
  --blank: #faf8f0;
  --highlight: #eee3da;
  --text-faded: gray;
  --text-default: #000000;
  --text-alt: #ffffff;
  /* Cells */
  --cell-outline-width: 1px;
  --cell-outline: #1e1a18;
  --idle: #ffffff;
  --active: #ffe0b5;
  --valid: #a3ff72;
  --invalid: #fe717b;
  /* Keyboard */
  --function-btn: #adb5bb;
  --active-btn: #efefef;
  --btn: #ffffff;
  --share-btn: #55974e;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

body {
  font-family: "Libre Franklin", "Segoe UI", "Helvetica Neue", sans-serif;
  /* Remove the default left margin and top margin with CSS */
  margin: 0;
  /* Unless otherwise specified, all text on-screen should be centered */
  text-align: center;
  background-color: var(--blank);
}

#header {
  font-size: 3vw;
}

#top-left-panel {
  /* Stick at the top-left of the screen */
  position: absolute;
  left: 0.5em;
  top: 1em;
}
#top-left-panel > img {
  float: left;
}

#top-right-panel {
  /* Stick at the top-right of the screen */
  position: absolute;
  right: 0.5em;
  top: 1em;
}

#about {
  color: var(--text-faded);
  font-size: small;
}

#timer-label {
  margin: 0em auto;
  margin-top: 3em;
  color: var(--text-faded);
  font-size: small;
}

#header {
  margin-top: 3vh;
}

@media only screen and (min-height: 700px) {
  /* For taller screens, add more space between the header and top of the screen to make the grid more centered */
  #header {
    margin-top: 10vh;
  }
}

/* FIX: score emojis looking weird on-screen. CSS rule for small-width screens (less than 350 px)  */
@media only screen and (max-width: 350px) {
  #score-emojis {
    font-size: 0.5rem;
  }
}

#header h1 {
  color: var(--cell-outline);
  margin: 0em auto;
}

#header p {
  color: var(--text-faded);
  font-size: small;
  cursor: pointer;
  text-decoration: underline;
  /* reduce the space between the header and it's subtitle */
  margin-top: 0.1em;
}

.puzzle-link {
  margin-left: 12px;
}

.puzzle-link > span {
  text-decoration: underline;
  cursor: pointer;
}

.modal {
  /* Fill the entire screen with a translucent background*/
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 3;
  animation: fadeIn 0.3s ease-in-out;
}

.modal.active {
  display: flex;
  background-color: rgba(0, 0, 0, 0.5);
}

#about-modal h2,
#sankofa-modal h2,
#about-modal h3 {
  margin-bottom: 0;
}

#about-modal p {
  margin-bottom: 6px;
}

#about-modal > .modal-content,
#sankofa-modal > .modal-content,
#image-hint-modal > .modal-content {
  text-align: left;
  padding-bottom: 0;
}

#score-modal > .modal-content {
  text-align: center;
  background-color: var(--cell-outline);
  color: #ffffff;
}

#image-hint-modal > .modal-content {
  width: 60%;
}

.modal-content {
  background-color: var(--blank);
  border-radius: 6px;
  min-height: 210px;
  padding: 24px;
  /* To prevent it from stretching far */
  max-width: 350px;
  width: 85%;
}
.modal-content ul,
.modal-content li {
  margin: 0 12px;
  padding: 0;
}

.modal-content > h2 {
  text-align: center;
  margin-top: 0.1em;
}
.modal-content > p:first {
  margin-top: 0.5em;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#score-emojis {
  margin-bottom: 0em;
}
#score-emojis > span {
  display: block;
  margin-top: -0.35em;
  margin-right: -0.4em;
}

#game-version {
  color: var(--text-faded);
  font-size: small;
  text-align: center;
}

#grid {
  display: grid;
  /* center grid on the screen */
  margin: auto;
  /* gap is same size as cell outline to fix the double border issue */
  gap: var(--cell-outline-width);
}

#error-panel {
  margin: 3em 2em;
  background-color: var(--highlight);
  border-radius: 6px;
  border: 1px solid var(--cell-outline);
  padding: 0.5em;
}
#error-text {
  font-style: italic;
}

.cell {
  outline: var(--cell-outline-width) solid var(--cell-outline);
  /* center content of the cell horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.blank-cell {
  cursor: default;
}
.blank-cell.visible {
  background-color: var(--cell-outline);
}

.filled-cell {
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}
/* An entry for each possible cell state */
.filled-cell.idle {
  background-color: var(--idle);
}
.filled-cell.active {
  background-color: var(--active);
}
.filled-cell.highlighted {
  background-color: var(--highlight);
}
.filled-cell.valid {
  background-color: var(--valid);
  transition: background-color 1s ease;
}
.filled-cell.invalid {
  background-color: var(--invalid);
  transition: background-color 1s ease;
}

.filled-cell * {
  /* Ignore pointer events so that clicks can bubble up to the parent div */
  pointer-events: none;
}
.filled-cell .hint-number {
  /* Make position absolute so that it can be placed at top left */
  position: absolute;
  left: 0.3em;
  top: 0.3em;
  font-size: 0.3em;
  color: var(--text-default);
  z-index: 2;
}
.filled-cell > p {
  z-index: 2;
}

.rounded-bl {
  border-bottom-left-radius: 3px;
}
.rounded-br {
  border-bottom-right-radius: 3px;
}
.rounded-tl {
  border-top-left-radius: 3px;
}
.rounded-tr {
  border-top-right-radius: 3px;
}

#score-text {
  /* Reduce the bottom margin so that the score button remains above the keyboard on iOS */
  margin-bottom: 0.5em;
}

button {
  border: 0;
  margin-top: 0.5em;
  border-radius: 1.5em;
  font-family: "Libre Franklin", "Segoe UI", "Helvetica Neue", sans-serif;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  padding: 0.7em 1.5em;
  border-color: var(--text-default);
}

#score-button {
  background-color: var(--cell-outline);
  color: var(--text-alt);
}

.loading-dots {
  display: none;
  overflow: hidden;
  animation: pulseDots 2s infinite;
  animation-delay: 1s;
}

.dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: white;
}

@keyframes pulseDots {
  0%,
  50%,
  100% {
    opacity: 0.5;
  }
  25%,
  75% {
    opacity: 1;
  }
}
.score-button-active {
  pointer-events: none;
}
.score-button-active .loading-dots {
  display: inline-block;
}

#share-button {
  background-color: var(--share-btn);
  color: var(--text-alt);
}

#mobile-panel {
  /* Place at the bottom of the screen */
  bottom: 0;
  position: fixed;
  width: 100%;
}
#hint-banner {
  background-color: var(--highlight);
  padding-bottom: 0.2em;
  padding-top: 0.5em;
  /* Center everything in the hint banner */
  display: flex;
  justify-content: center;
  align-items: center;
}
#left-arrow,
#right-arrow {
  cursor: pointer;
  flex: 1;
  font-size: 1.5em;
}
#hint-content {
  flex: 6;
}

#hints {
  /* Keep the list of hints hidden on mobile, that's what `mobile-panel` is for */
  display: none;
}

/* On Desktop */
@media only screen and (min-width: 992px) {
  /* Don't show mobile panel */
  #mobile-panel {
    display: none;
  }
  /* And show the list of hints instead */
  #hints {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 63px;
    border-left: 0.5px solid var(--cell-outline);
    padding: 2rem;
    /* width: 100%; */
  }

  /* adding .hide to hints is not specific enough, use this to make it it works well */
  #hints.hide {
    display: none;
  }

  .hint-content {
    cursor: pointer;
    text-align: left;
    overflow-wrap: break-word;
    max-width: 340px;
  }

  #hints .active-highlight {
    background-color: var(--highlight);
  }

  .central-area {
    display: flex;
    flex-direction: row;
    gap: 63px;
    justify-content: center;
    margin: auto;
  }
}

#confetti-canvas {
  /* canvas should fill the screen */
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  /* Since canvas is filling the screen, ignore mouse events otherwise player won't be able to click on screen */
  pointer-events: none;
  z-index: 100;
}

/* CSS from Simple-Keyboard */
/*!
* 
*   simple-keyboard v3.6.18
*   https://github.com/hodgef/simple-keyboard
*
*   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
*
*   This source code is licensed under the MIT license found in the
*   LICENSE file in the root directory of this source tree.
*
*/
.hg-theme-default {
  background-color: #ececec;
  overflow: hidden;
  touch-action: manipulation;
  width: 100%;
}

.hg-theme-default,
.hg-theme-default .hg-button {
  box-sizing: border-box;
  padding: 6px;
}

.hg-theme-default .hg-button {
  cursor: pointer;
  height: 42px;
  border-radius: 6px;
  /* buttons should grow to fill the space */
  flex-grow: 1;
  /* make the button look realistic */
  background: var(--btn);
  border-bottom: 1px solid #b5b5b5;
  box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.3);
  /* Center content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hg-theme-default .hg-button span,
.hg-theme-default .hg-button img {
  pointer-events: none;
}

.hg-theme-default .hg-button.hg-standardBtn {
  width: 20px;
}

.hg-theme-default .hg-row {
  display: flex;
}

/* Put a bottom margin for the top 2 rows, last should stay where it is */
.hg-theme-default .hg-row:not(:last-child) {
  margin-bottom: 5px;
}
/* Put a right margin on all buttons except the right-most/last */
.hg-theme-default .hg-row .hg-button-container,
.hg-theme-default .hg-row .hg-button:not(:last-child) {
  margin-right: 5px;
}
/* Active button should have a sheen on it */
.hg-theme-default .hg-button.hg-activeButton {
  background: var(--active-btn);
}
/* Make the function buttons dark grey */
.hg-theme-default .hg-button-function {
  background-color: var(--function-btn);
  font-size: 1.5em;
}
/* Adjust margins for 2nd row to get equal sizes to 1st row */
.hg-row.alpha-mid-row {
  margin-left: 1.1em;
  margin-right: 1.1em;
}

/* Utility Styles */
.visible {
  opacity: 100%;
}
.invisible {
  opacity: 0%;
}

.show {
  display: block;
}
.hide {
  display: none;
}

.display-flex {
  display: flex;
}

.fade-in-text {
  animation: fadeIn 0.3s ease-in-out; /* Adjust the duration and easing function as needed */
}

.circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  margin-right: 10px; /* Adjust margin as needed */
}

/* For multimedia puzzles */

/* https://blog.shahednasser.com/how-to-style-an-audio-element/ */
audio {
  margin: 0;
  padding: 0;
  height: 33px;
  width: 100%;
}
audio::-webkit-media-controls-panel {
  background-color: var(--highlight);
}
audio::-webkit-media-controls-mute-button {
  display: none;
}

/* audio::-webkit-media-controls-current-time-display {
  display: none;
}
audio::-webkit-media-controls-time-remaining-display {
  display: none;
} */