*,
*::before,
*::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

html,
body {
  background  : #fafaf8;
  color       : #333;
  font-family : 'Courier New', monospace;
  height      : 100%;
}

#app {
  display : flex;
  height  : 100%;
}

#app::selection,
#app span::selection {
  background : transparent;
  color      : inherit;
}

#map {
  display              : grid;
  flex                 : 1;
  font-size            : 22px;
  grid-auto-rows       : 1lh;
  justify-content      : center;
  line-height          : 0.9;
  overflow             : hidden;
  padding              : 10px;
}

#map span {
  align-items : center;
  display     : flex;
  justify-content : center;
  overflow    : visible;
}

#panel {
  border-left : 1px solid #ddd;
  font-size   : 16px;
  line-height : 1.3;
  overflow-y  : auto;
  padding     : 14px;
  white-space : pre-wrap;
  width       : 290px;
}

.t0  { color:#6a8a4a; }
.t1  { color:#4a6a2a; }
.t2  { color:#a89880; }
.t3  { color:#888; }
.t4  { color:#c8c0a8; }
.t5  { color:#a86830; }
.t6  { color:#78a8c0; }
.t7  { color:#a89880; }
.t8  { color:#c8c0b0; }
.t9  { color:#c0a878; }
.t10 { color:#b09870; }
.t11 { color:#a08868; }
.t12 { color:#a0a0a0; }
.t13 { color:#b09878; }
.t14 { color:#70a8c0; }

.ag { color:#d06810; }

@media (max-width:600px) {
  #app {
    flex-direction : column;
  }

  #map {
    flex        : none;
    font-size   : 15px;
    line-height : 0.9;
    overflow    : auto;
  }

  #panel {
    border-left : none;
    border-top  : 1px solid #ddd;
    width       : 100%;
  }
}