:root {
  --color-present: #cb6;
  --color-correct: #6a6;
  --color-absent: #777;
  --tile-text-color: #fff;
  --key-text-color: #000;
  --key-evaluated-text-color: #fff;
  --key-bg: #d8d8d8;
  --key-bg-present: #cb6;
  --key-bg-correct: #6a6;
  --key-bg-absent: #777;
  --modal-content-bg: #fff;
  --color-tone-2: #666;
  --color-tone-3: #999;
  --color-tone-4: #ddd;
  --header-height: 240px;
  --game-max-width: 480px;
  font-family: RobotoMono, Consolas, monospace;
}
header h1 {
  text-align: center;
  margin: auto auto 1rem;
}
header nav {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
header nav * {
  padding: 0.2rem;
  margin: 0.2rem;
}
header nav .btn {
  color: #fff;
  background-color: #0f6674;
  border-radius: 0.2rem;
}
header nav .btn.disabled {
  background-color: #687577;
  cursor: default;
}
header nav .btna {
  text-decoration: none;
}
#game {
  width: 100%;
  margin: 0 auto;
  height: calc(100% - var(--header-height));
  display: flex;
  flex-direction: column;
}
#game #board-container,
#game .board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
}
#game #board-container #board,
#game .board-container #board,
#game #board-container .board,
#game .board-container .board {
  width: 200px;
  height: 424px;
  display: grid;
  grid-template-rows: repeat(9, 1fr);
  grid-gap: 4px;
  padding: 9px;
  box-sizing: border-box;
}
#game #board-container #board .row,
#game .board-container #board .row,
#game #board-container .board .row,
#game .board-container .board .row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 4px;
  position: relative;
}
#game #board-container #board .row .tile,
#game .board-container #board .row .tile,
#game #board-container .board .row .tile,
#game .board-container .board .row .tile {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  line-height: 2rem;
  font-weight: bold;
  vertical-align: middle;
  box-sizing: border-box;
  color: var(--tile-text-color);
  text-transform: uppercase;
  user-select: none;
}
@media (max-height: 600px) {
  #game #board-container #board .row .tile,
  #game .board-container #board .row .tile,
  #game #board-container .board .row .tile,
  #game .board-container .board .row .tile {
    font-size: 1em;
    line-height: 1em;
  }
}
#game #board-container #board .row .tile.state_empty,
#game .board-container #board .row .tile.state_empty,
#game #board-container .board .row .tile.state_empty,
#game .board-container .board .row .tile.state_empty {
  border: 2px solid var(--color-tone-4);
  color: var(--key-text-color);
}
#game #board-container #board .row .tile.state_input,
#game .board-container #board .row .tile.state_input,
#game #board-container .board .row .tile.state_input,
#game .board-container .board .row .tile.state_input {
  border: 2px solid var(--color-tone-2);
  color: var(--key-text-color);
}
#game #board-container #board .row .tile.state_absent,
#game .board-container #board .row .tile.state_absent,
#game #board-container .board .row .tile.state_absent,
#game .board-container .board .row .tile.state_absent {
  background-color: var(--color-absent);
}
#game #board-container #board .row .tile.state_present,
#game .board-container #board .row .tile.state_present,
#game #board-container .board .row .tile.state_present,
#game .board-container .board .row .tile.state_present {
  background-color: var(--color-present);
}
#game #board-container #board .row .tile.state_correct,
#game .board-container #board .row .tile.state_correct,
#game #board-container .board .row .tile.state_correct,
#game .board-container .board .row .tile.state_correct {
  background-color: var(--color-correct);
}
#game #board-container #board .row .tile.state_null,
#game .board-container #board .row .tile.state_null,
#game #board-container .board .row .tile.state_null,
#game .board-container .board .row .tile.state_null {
  position: absolute;
  display: inline-block;
  width: 0;
  right: -8px;
  height: 100%;
}
#game #board-container #board .row .tile::before,
#game .board-container #board .row .tile::before,
#game #board-container .board .row .tile::before,
#game .board-container .board .row .tile::before {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}
#game #board-container #board .row.active .tile.state_empty,
#game .board-container #board .row.active .tile.state_empty,
#game #board-container .board .row.active .tile.state_empty,
#game .board-container .board .row.active .tile.state_empty {
  border-color: #6e97d7;
}
#game #board-container #board .row.active .tile.cursor,
#game .board-container #board .row.active .tile.cursor,
#game #board-container .board .row.active .tile.cursor,
#game .board-container .board .row.active .tile.cursor {
  border-color: #71b2ff;
  box-shadow: 0 0 8px 2px #71b2ff;
}
#game #board-container #board .toaster,
#game .board-container #board .toaster,
#game #board-container .board .toaster,
#game .board-container .board .toaster {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  pointer-events: none;
  width: fit-content;
}
#game #board-container #board #game-toaster,
#game .board-container #board #game-toaster,
#game #board-container .board #game-toaster,
#game .board-container .board #game-toaster {
  z-index: 1000;
}
#game #board-container #board #system-toaster,
#game .board-container #board #system-toaster,
#game #board-container .board #system-toaster,
#game .board-container .board #system-toaster {
  z-index: 4000;
}
#game #board-container #board header,
#game .board-container #board header,
#game #board-container .board header,
#game .board-container .board header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 0 16px;
  height: var(--header-height);
  color: black;
  border-bottom: 1px solid var(--color-tone-4);
}
#game #board-container #board header .title,
#game .board-container #board header .title,
#game #board-container .board header .title,
#game .board-container .board header .title {
  font-family: "roboto condensed", sans-serif;
  font-weight: 700;
  font-size: 37px;
  line-height: 100%;
  letter-spacing: 0.01em;
  text-align: center;
  left: 0;
  right: 0;
  pointer-events: none;
}
@media (min-width: 415px) {
  #game #board-container #board header,
  #game .board-container #board header,
  #game #board-container .board header,
  #game .board-container .board header {
    padding: 0 16px;
  }
}
@media (max-width: 360px) {
  #game #board-container #board header .title,
  #game .board-container #board header .title,
  #game #board-container .board header .title,
  #game .board-container .board header .title {
    font-size: 22px;
    letter-spacing: 0.1rem;
  }
}
#game #board-container #board button.icon,
#game .board-container #board button.icon,
#game #board-container .board button.icon,
#game .board-container .board button.icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
}
#game .board-container {
  display: inline-flex;
  width: calc(var(--game-max-width) / 2 - 10px);
}
#game .quad-container {
  display: block;
  width: calc(var(--game-max-width) * 2 + 10px);
  margin: auto;
}
#game .board-1 {
  display: block;
}
#keyboard {
  margin: 0 8px;
  user-select: none;
  font-family: inherit;
  font-weight: bold;
  font-size: 1.2rem;
}
#keyboard .row {
  display: flex;
  width: 100%;
  margin: 0 auto 8px;
  /* https://stackoverflow.com/questions/46167604/ios-html-disable-double-tap-to-zoom */
  touch-action: manipulation;
}
#keyboard button {
  font-weight: inherit;
  border: 1px solid #999;
  padding: 0;
  margin: 0 6px 0 0;
  height: 58px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  background-color: var(--key-bg);
  color: var(--key-text-color);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}
#keyboard button:focus {
  outline: none;
}
#keyboard button.fade {
  transition: background-color 0.1s ease, color 0.1s ease;
}
#keyboard button:last-of-type {
  margin: 0;
}
#keyboard .d5 {
  flex: 0.5;
}
#keyboard .d10 {
  flex: 1;
}
#keyboard .d15 {
  flex: 1.5;
}
#keyboard .d20 {
  flex: 2;
}
#keyboard .d25 {
  flex: 2.5;
}
#keyboard button.state_correct {
  background-color: var(--key-bg-correct);
  color: var(--key-evaluated-text-color);
}
#keyboard button.state_present {
  background-color: var(--key-bg-present);
  color: var(--key-evaluated-text-color);
}
#keyboard button.state_absent {
  background-color: var(--key-bg-absent);
  color: var(--key-evaluated-text-color);
}
#keyboard button.enter,
#keyboard button.back {
  background-color: #9ba8e7;
}
.alert {
  text-align: center;
  padding: 1rem;
}
.alert-danger {
  background-color: #d7c4bc;
  color: maroon;
}
.alert-success {
  background-color: #bcd7be;
  color: #0d8000;
}
.alert-info {
  background-color: #bcd7d7;
  color: #008080;
}
/*# sourceMappingURL=style.css.map */