/* TODO: Consider replacing dashes in identifiers with underscores, for
reasons outlines in other documents. */

:root {
  --game-num-cols: 5;
  --game-num-rows: 5;
  --key-num-cols: 7;
  --key-num-rows: 4;
  --slide-delay: 0.2s;
  --slide-duration: 0.2s;
  --cell-big: 76px;
  --cell-small: 33px;
}

/* sets up box-sizing to border-box, which prevents padding and borders from
   expanding the width and height of an element */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  /* Ensures above box-sizing rule is inherited in all child elements. */
  box-sizing: inherit;
  margin: 0px;
}

body {
  color: #d6e2d3;
  background-color: #181d17;
  font-family: Arial, Helvetica, Cambria Math, sans-serif;
}

/* unvisited link */
a:link {
  color: #f0f0f0;
}

/* visited link */
a:visited {
  color: #999999;
}

/* touched link */
a:hover {
  color: #d6e2d3;
}

/* mid-click link */
a:active {
  color: #ffffff;
}

.lexical {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: bold;
}

#main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 30px;
  padding-bottom: 30px;
  height: 100vh;
  align-items: center;
}

#messages {
  text-align: center;
}

.tyler-container {
  display: block;
  position: relative;
}

#menu-icons-container {
  position: fixed;
  left: 30px;
}

#menu-text-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  position: fixed;
  left: 73px;
}

.inline-emphasized {
  padding: 0px 5px;
  background-color: rgb(70, 74, 69, 1);
  text-transform: uppercase;
}

.inline-monospace {
  font-family: monospace;
  font-weight: bold;
}

.inline-spoiler {
  color: #464a45;
}

#game-tyler {
  display: grid;
  grid-template-rows: repeat(var(--game-num-rows), var(--cell-big));
  grid-template-columns: repeat(var(--game-num-cols), var(--cell-big));
  gap: 10px;
}

#key-tyler {
  display: grid;
  grid-template-rows: repeat(var(--key-num-rows), var(--cell-big));
  grid-template-columns: repeat(var(--key-num-cols), var(--cell-big));
  gap: 10px;
}

#menu-tyler {
  display: grid;
  grid-template-rows: repeat(6, var(--cell-small));
  grid-template-columns: repeat(1, var(--cell-small));
  gap: 10px;
}

.menu-text {
  font-size: 80%;

  height: var(--cell-small);

  display: flex;
  flex-direction: column;
  justify-content: center;

  opacity: 0.0;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  cursor: default;
}

.menu-text__hovered {
  opacity: 0.5;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.menu-text__clickable.menu-text__hovered {
  opacity: 1.0;
}

.menu-text__clickable {
  cursor: pointer;
}

.menu-tile__transparent {
  opacity: 0.50;
}

.game-tyler__frame-cell::before, .key-tyler__frame-cell::before {
  content: '';
  position: absolute;
  width: var(--cell-big);
  height: var(--cell-big);
  border: 1px solid #464a45;
  border-radius: 5px;
  z-index: -1;
}

.menu-tyler__frame-cell::before {
  content: '';
  position: absolute;
  width: var(--cell-small);
  height: var(--cell-small);
  border: 1px solid #464a45;
  border-radius: 5px;
}

.game-tyler__frame-cell, .key-tyler__frame-cell {
  position: relative;

  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #464a45 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position-y: calc(-1 * var(--cell-big));

  transition-property: box-shadow, background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  
  box-shadow: inset 0px 0px 0px 0px #999999;
  border-radius: 5px;

  /* prevents element from being selectable */
  user-select: none;
}

/* default cell stylings for game-tyler (formerly referred to as empty cells) */
.game-tyler__frame-cell {
  background-color: transparent;
}

/* default cell stylings for key-tyler (formerly referred to as empty cells) */
.key-tyler__frame-cell {
  background-color: #464a45;
}

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

.svg-default-size {
  width: 60%;
}

.locked, .locked-delayed {
  background-position-y: 0px;
}

.hint-none, .hint-unknown, .hint-perfect {
  transition-duration: 0.1s;
}

.locked-delayed {
  transition-delay: calc(
    var(--slide-delay) * var(--game-num-cols) + var(--slide-duration) + 
    var(--slide-duration) + var(--slide-delay) * var(--col));
  transition-duration: 0.3s;
  color: rgb(214, 226, 211, 0);

  animation-name: delayed-letter-fadein;
  animation-duration: var(--slide-duration);
  animation-delay: calc(
    var(--slide-delay) * var(--game-num-cols) + var(--slide-duration) + 
    var(--slide-duration) + var(--slide-delay) * var(--col));
  animation-fill-mode: both;
}

.prediction-bars .hint-none {
  box-shadow: inset 0px 3px 0px 0px #b34848;
}

.prediction-bars .hint-unknown {
  box-shadow: inset 0px 3px 0px 0px #aaaa2a;
}

.prediction-bars .hint-perfect {
  box-shadow: inset 0px 3px 0px 0px #20ab20;
}

.match-none, .match-imperfect, .match-perfect, .match-forfeit {
  transition-duration: 0.3s;
  transition-delay: calc(var(--slide-duration) + var(--slide-delay) * var(--col));
}

.match-none {
  box-shadow: inset 0px var(--cell-big) 0px 0px #b34848;
}

.match-imperfect {
  box-shadow: inset 0px var(--cell-big) 0px 0px #aaaa2a;
}

.match-perfect {
  box-shadow: inset 0px var(--cell-big) 0px 0px #20ab20;
}

.match-forfeit {
  box-shadow: inset 0px var(--cell-big) 0px 0px #0078d7;
  color: rgb(214, 226, 211, 0);

  animation-name: delayed-letter-fadein;
  animation-duration: var(--slide-duration);
  animation-delay: calc(var(--slide-duration) + var(--slide-delay) * var(--col));
  animation-fill-mode: both;
}

@keyframes delayed-letter-fadein {
  to { color: rgb(214, 226, 211, 1); }
}

.drag-highlight::before {
  border: 1px solid white;
  z-index: 1;
}

.hover-highlight::before {
  border: 1px dotted white;
  z-index: 1;
}

.drag-effect {
  opacity: 0.5;
}

.custom-mode__actionable, .returnable, .deleteable, .stoppable, .skippable,
.shareable, .settable, .documentable, .helpable {
  cursor: pointer;
}

.moveable {
  cursor: move;
}

.copyable {
  cursor: copy;
}

.hidden {
  visibility: hidden;
}

#tooltip-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 420px; 
  gap: 10px;
}

@keyframes dictionary-fadeout {
  from { opacity: 1.0; }
}

#tooltip__dictionary {
  padding-left: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--cell-big); 
  opacity: 0.0;
  transition: opacity 0.3s;

  animation-name: dictionary-fadeout;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

#tooltip__dictionary__string {
  font-size: small;
  white-space: nowrap;
}

#tooltip__dictionary:hover {
  opacity: 1.0;
}

.modal-background {
  /* display: none; */
  opacity: 0;
  height: 0;
  width: 0;
  transform: translateY(-200px);

  position: fixed;
  left: 0;
  top: 0;
  /* height: 100%; */
  /* background-color:#181d17; */
  background-color: rgb(24, 29, 23, 0.85);

  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.modal {
  /* display: none; */
  opacity: 0;
  height: 0;
  width: 0;
  transform: translateY(-200px);

  background-color: #181d17;
  padding: 2em;
  padding-bottom: 3em;
  position: fixed;
  max-height: calc(100vh - 200px);
  left: 150px;
  top: 30px;
  bottom: 30px;
  border-radius: 10px;
  border: 1px solid white;
  overflow: auto;
  cursor: initial;

  -ms-overflow-style: none;   /* IE and Edge */
  scrollbar-width: none;      /* Firefox */

  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.modal::-webkit-scrollbar {
  display: none;
}

.visible {
  /* display: initial; */
  opacity: 1;
  transform: initial;
}

.modal-background.visible {
  height: 100%;
  width: 100%;
}

.modal.visible {
  height: fit-content;
  width: 592px;
}

.modal-escapable {
  cursor: pointer;
}

.modal p {
  line-height: 1.5em;
}

.modal p:not(:last-child) {
  margin-bottom: 1.5em;
}

h4 {
  margin-bottom: 1.5em;
}

table {
  border-collapse: collapse;
}

td {
  vertical-align: top;
  padding: 0;
  padding-bottom: 1.5em;
}

td {
  padding-right: 1.5em;
}

#modal-info tr:last-child td {
  padding-bottom: 0;
}

.glow {


  /* animation-name: name-ux-reveal;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out; */

  animation: glow-effect .5s infinite alternate;
}

@keyframes glow-effect {
  to { 
    text-shadow: 
       0px  0px 10px rgb(255, 255, 255),
       0px  0px 10px rgb(255, 255, 255);
  }
}

.setting-description {
  cursor: pointer;
}