html, body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif; }

html {
  height: 100%; }

body, #app {
  height: 100%;
  color: #4C4028; }

a {
  color: #7F4B61; }

h3 {
  font-size: 20px;
  line-height: 1.25; }

h3, p {
  margin: 0; }

h3:not(:last-child), p:not(:last-child) {
  margin-bottom: 12px; }

@media screen and (max-width: 959px) {
  .is-hidden-mobile {
    display: none; } }

.root {
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column; }

.title-bar {
  flex: 0 0 48px;
  background-color: #7F4B61;
  color: #fbf6dd; }
  @media screen and (min-width: 960px) {
    .title-bar {
      padding-left: 24px;
      font-size: 24px;
      line-height: 48px; } }
  @media screen and (max-width: 959px) {
    .title-bar {
      flex: 0 0 30px;
      padding-left: 12px;
      font-size: 18px;
      line-height: 30px; } }
.main-panel {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F5EBB0;
  padding: 24px 0; }
  @media screen and (max-width: 959px) {
    .main-panel {
      padding: 12px 0; } }
.panel {
  display: flex;
  flex-direction: column;
  text-align: center; }

.game {
  user-select: none;
  -moz-user-select: none; }

.button {
  display: inline-block;
  margin: 0 6px;
  text-decoration: none;
  background-color: #7F4B61;
  color: #fbf6dd;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  -webkit-appearance: none; }
  @media screen and (min-width: 960px) {
    .button {
      height: 48px;
      font-size: 20px;
      line-height: 48px;
      width: 150px; } }
  @media screen and (max-width: 959px) {
    .button {
      height: 32px;
      font-size: 16px;
      line-height: 32px;
      width: 120px; } }
  .button:focus {
    outline: none; }
  .button:hover {
    background-color: #9f5e79;
    cursor: pointer; }

.language-picker img {
  width: 50px;
  height: 50px;
  opacity: 0.4; }
  .language-picker img:hover {
    cursor: pointer; }
  .language-picker img:not(:last-child) {
    margin-right: 20px; }
  .language-picker img.selected {
    border-radius: 25px;
    box-shadow: 0 0 10px #7F4B61;
    opacity: 1; }

.welcome {
  text-align: center; }
  .welcome .title {
    font-size: 72px;
    line-height: 1.5; }

.how-to-play {
  align-self: start;
  padding: 0 20px 20px 20px;
  max-width: 600px; }
  .how-to-play .nines-area {
    margin-top: 18px; }
  .how-to-play svg {
    stroke: #bdaa83;
    display: inline-block;
    width: 20px;
    height: 20px; }
    @media screen and (max-width: 959px) {
      .how-to-play svg {
        width: 16px;
        height: 16px; } }
  .how-to-play button {
    margin: 0; }
  .how-to-play p {
    margin: 12px 0;
    line-height: 1.4; }
    @media screen and (min-width: 960px) {
      .how-to-play p {
        font-size: 20px; } }
.diagram {
  display: inline-grid;
  padding: 8px;
  grid-template-columns: repeat(5, 46px);
  grid-template-rows: repeat(5, 46px);
  grid-gap: 1px;
  box-sizing: border-box; }
  @media screen and (max-width: 959px) {
    .diagram {
      grid-template-columns: repeat(5, 30px);
      grid-template-rows: repeat(5, 30px); } }
@media screen and (max-width: 959px) {
  .diagram-small {
    grid-template-columns: repeat(5, 12px);
    grid-template-rows: repeat(5, 12px); } }

.diagram-finished .diagram-item {
  text-stroke: 1px white;
  text-shadow: 0 0 10px white;
  background: #cfd69a; }

.diagram-finished .tile {
  cursor: default;
  background: none;
  border: none; }

.diagram-item {
  cursor: default;
  background: #fbf6dd;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 1px #4C4028; }

.diagram-highlighted .diagram-item {
  background: #e0e5be; }

.diagram-item-highlighted {
  background: #A5AC82 !important;
  transition: background 200ms; }

.diagram-item-corner {
  visibility: hidden; }

.reload {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }
  .reload svg {
    display: block;
    width: 30px;
    height: 30px;
    stroke: #bdaa83; }
    @media screen and (max-width: 959px) {
      .reload svg {
        width: 18px;
        height: 18px; } }
  .reload:hover svg {
    stroke: #4C4028; }

.diagram-item-border {
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase; }
  @media screen and (max-width: 959px) {
    .diagram-item-border {
      font-size: 18px; } }
@media screen and (max-width: 959px) {
  .diagram-small .diagram-item-border {
    font-size: 9px; } }

.tile {
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  box-sizing: border-box;
  background: #d1d5bf;
  border: 1px solid #A5AC82;
  border-radius: 6px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase; }
  @media screen and (max-width: 959px) {
    .tile {
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 18px; } }
@media screen and (max-width: 959px) {
  .diagram-small .tile {
    width: 9px;
    height: 9px;
    line-height: 9px;
    font-size: 9px;
    border-radius: 1px; } }

@media screen and (max-width: 959px) {
  .diagram-small .reload {
    visibility: hidden; } }

.tile-hidden {
  transform: translateX(-9999px); }

.diagrams-area {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.diagram-current {
  order: 5; }

.nines-area {
  margin: 0 auto;
  padding: 12px;
  width: 372px;
  display: inline-block;
  background: #fbf6dd;
  border: 1px solid black; }
  @media screen and (max-width: 959px) {
    .nines-area {
      width: 100%; } }
  @media screen and (max-width: 959px) {
    .nines-area {
      border-left: none;
      border-right: none;
      padding: 6px 0; } }
  .nines-area .nine {
    display: flex;
    align-items: center;
    margin-bottom: 0; }
    @media screen and (max-width: 959px) {
      .nines-area .nine {
        width: 216px;
        margin: 0 auto; } }
    .nines-area .nine .tile {
      margin: 0; }

.nines-area-highlighted {
  background: #A5AC82 !important;
  transition: background 200ms; }

.nine {
  padding: 5px 5px;
  height: 45px;
  margin-bottom: 10px;
  text-align: left; }
  @media screen and (max-width: 959px) {
    .nine {
      padding: 2px 2px;
      height: 26px; } }
.author {
  position: absolute;
  bottom: 0px;
  left: 6px; }

@media screen and (max-width: 959px) {
  .difficulty {
    padding-bottom: 24px; } }

.difficulty h2 {
  margin: 0; }

.dictionary {
  vertical-align: middle;
  display: inline-block;
  border: 1px solid #7F4B61;
  border-radius: 18px;
  width: 80%;
  padding: 18px;
  margin: 18px;
  transition: background-color 0.2s;
  cursor: pointer; }
  @media screen and (min-width: 960px) {
    .dictionary {
      width: 200px;
      height: 200px; } }
  @media screen and (max-width: 959px) {
    .dictionary {
      padding: 12px;
      margin: 12px; } }
  .dictionary.selected, .dictionary:hover {
    background-color: #7F4B61;
    color: #fbf6dd; }
    .dictionary.selected a, .dictionary:hover a {
      color: #fbf6dd; }

.success h1 {
  display: block;
  margin: 0;
  font-size: 150px;
  text-shadow: 0 0 30px #4C4028;
  animation: tilt 2s ease infinite 0s; }
  @media screen and (max-width: 959px) {
    .success h1 {
      font-size: 80px; } }
.buttons {
  margin-top: 18px;
  text-align: center; }
  @media screen and (max-width: 959px) {
    .buttons .button {
      display: inline-block; }
      .buttons .button:not(:last-child) {
        margin-bottom: 6px; } }
.tile-current {
  transform: scale(1.5, 1.5); }

.toast {
  position: absolute;
  top: -100px;
  width: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 50px;
  background: #7F4B61;
  color: #fbf6dd;
  font-size: 20px;
  line-height: 1.25;
  display: grid;
  place-content: center;
  transition: top 0.6s; }
  @media screen and (max-width: 959px) {
    .toast {
      width: 90%; } }
.toast.shown {
  top: 100px; }

@keyframes tilt {
  0% {
    transform: rotate(20deg); }
  25% {
    transform: rotate(0); }
  50% {
    transform: rotate(-20deg); }
  75% {
    transform: rotate(0); }
  100% {
    transform: rotate(20deg); } }