:root {
  --transition-1: opacity 0.2s ease-in-out;
  --transition-2: opacity 0.6s ease-in-out;
}
body {
  position: fixed;
  width: 100%;
  margin: 0;
  font-family: 'iosevka ss05', Menlo, 'Andale Mono', monospace;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
#app {
  height: 100vh;
}
.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  opacity: 0;
  transition: var(--transition-2);
}
.main.has-initially-loaded {
  opacity: 1;
}
.board-container {
  width: 90vw;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .board-container {
    padding: 1em 0;
  }
}
.above-board,
.below-board {
  display: flex;
  padding: 0.3em 0;
}
.above-board span,
.below-board span {
  padding: 0 0.4em;
  font-family: serif;
  font-size: 0.8em;
  transition: var(--transition-1);
}
.minus,
.plus {
  position: relative;
  top: 3px;
  right: -5px;
  padding: 2px 8px;
  color: #888;
  transition: var(--transition-1);
  cursor: pointer;
}
.minus:hover,
.plus:hover {
  color: #333;
}
.minus:active,
.plus:active {
  color: #000;
}
.mode-selection {
  position: relative;
  right: -5px;
  padding: 3px 2px;
  color: #bbb;
  transition: var(--transition-1);
  cursor: pointer;
}
.mode-selection:hover {
  color: #333;
}
.mode-selection:active {
  color: #000;
}
.mode-selection.is-selected {
  color: #333;
  cursor: default;
}
.above-board .left {
  position: relative;
  left: -3px;
}
.above-board .right {
  flex: 1;
  text-align: right;
}
.arrow-left,
.arrow-right {
  position: relative;
  padding: 3px 7px;
  font-size: 1.1em;
  cursor: pointer;
}
@media (min-width: 400px) {
  .arrow-left,
  .arrow-right {
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.9em;
  }
}
.below-board {
}
.below-board .left {
  flex: 1;
  position: relative;
  left: -3px;
  opacity: 1;
  transition: var(--transition-1);
}
.below-board .left.is-hidden {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}
.below-board .right {
  text-align: right;
}
.board {
  position: relative;
  display: grid;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.constrain-width {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 480px) {
  .constrain-width {
    width: 80%;
  }
}
@media (min-width: 768px) {
  .constrain-width {
    width: 70%;
  }
}
@media (min-width: 768px) {
  .constrain-width {
    width: 62vh;
  }
}
@media (min-width: 480px) {
  .board {
    grid-template-rows: auto !important;
  }
}
.square {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.square.board-edge-bottom {
  border-bottom: 1px solid #222 !important;
}
.square.board-edge-right {
  border-right: 1px solid #222 !important;
}
.square.black {
  background: #222;
}
.square.entry {
  background: white;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.entry-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.1em;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.board-edge-bottom .entry-inner {
  border-bottom: 0;
}
.entry-inner {
  font-family: 'Proxima Nova', 'San Francisco', 'Helvetica Neue', Helvetica,
    Arial, sans-serif;
  font-size: 1.25em;
  border-bottom: 0;
}
@media (min-width: 768px) {
  .entry-inner {
    font-size: 1.5em;
  }
}
@media (min-width: 1200px) {
  .entry-inner {
    /* font-size: 1.6em; */
  }
}
@media (min-width: 1400px) {
  .entry-inner {
    font-size: 1.6em;
  }
}
@media (min-width: 1800px) {
  .entry-inner {
    font-size: 1.8em;
  }
}
.square.clue {
  position: relative;
  background: #222;
  color: white;
  border-right: 1px solid #3b3b3b;
  border-bottom: 1px solid #3b3b3b;
  overflow: hidden;
}
.square.clue:before,
.square.clue:after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 100vh solid transparent;
  border-right: 100vh solid transparent;
}
.square.clue:before {
  left: 0;
  border-top: 100vh solid #666;
}
.square.clue:after {
  left: 1px;
  border-top: 100vh solid #222;
}
.clue-input {
  position: absolute;
  width: 50%;
  height: 50%;
  padding: 0;
  font-family: 'Proxima Nova', 'San Francisco', 'Helvetica Neue', Helvetica,
    Arial, sans-serif;
  color: white;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  z-index: 1;

  /* "base" font-size is in div.square's markup, */
  /* this is a "multiplier," sorta =) */
  font-size: 0.7em;
}
@media (min-width: 360px) {
  .clue-input {
    font-size: 0.8em;
  }
}
@media (min-width: 400px) {
  .clue-input {
    font-size: 0.9em;
  }
}
@media (min-width: 500px) {
  .clue-input {
    font-size: 1em;
  }
}
@media (min-width: 768px) {
  .clue-input {
    font-size: 1.1em;
  }
}
@media (min-width: 1200px) {
  .clue-input {
    font-size: 1.18em;
  }
}
@media (min-width: 1400px) {
  .clue-input {
    font-size: 1.24em;
  }
}
@media (min-width: 1800px) {
  .clue-input {
    font-size: 1.4em;
  }
}
.clue-input.down {
  bottom: -2px;
  left: 2px;
}
.clue-input.right {
  right: 0;
  top: 1px;
}
.clue-input.down.hide-down,
.clue-input.right.hide-right {
  opacity: 0;
}
.clue-input.down.hide-down:focus,
.clue-input.right.hide-right:focus {
  opacity: 1;
}
.clue-input.down.exclude-down,
.clue-input.right.exclude-right {
  display: none;
}

.button-container {
  text-align: center;
  padding: 2vh 0 14vh;
}
@media (min-width: 400px) {
  .button-container {
    padding: 2vh 0 12vh;
  }
}
@media (min-width: 768px) {
  .button-container {
    padding: 2vh 0 8vh;
  }
}
.button-indicator {
  position: relative;
  display: inline-block;
}
.button-indicator:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
}
.button-indicator.is-requesting:before {
  background: #ccc;
}
.button-indicator.is-timeout:before {
  background: #ffbad1;
}
.button-indicator.is-no-solution:before {
  background: #ff8c94;
}
.button-indicator.is-success:before {
  background: #b1e597;
}
.button-indicator.is-requesting button,
.button-indicator.is-timeout button,
.button-indicator.is-no-solution button,
.button-indicator.is-success button {
  top: 0px !important;
}
.button-indicator.is-requesting button {
  background: #333;
  cursor: progress;
}
.button-indicator.is-timeout button,
.button-indicator.is-no-solution button {
  background: #555;
  cursor: not-allowed;
}
.button-indicator.is-success button {
  background: #555;
  cursor: default;
}
button {
  position: relative;
  margin-bottom: 5px;
  padding: 1.4em 4.6em;
  font-family: monospace;
  font-weight: bold;
  color: white;
  background: #222;
  box-shadow: none;
  border: 2px solid transparent;
  outline: none;
  cursor: pointer;
  overflow: hidden;
}
@media (min-width: 1600px) {
  button {
    font-size: 1.05em;
  }
}
@media (min-width: 1800px) {
  button {
    font-size: 1.1em;
  }
}
button:hover {
  top: -1px;
}
button:active {
  top: 0px;
}
.em {
  font-style: italic;
  cursor: default;
}
.is-dimmed {
  opacity: 0.5;
}
.is-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}