/******************************************************************************/
/** LAYOUT ********************************************************************/
/******************************************************************************/
.fullscreen-module {}

.map-main-menu
{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3em;

   display: flex;

   flex-direction: row;
   flex-wrap: wrap;

   border: 3px solid #502D16;
   border-top: none;
   border-radius: 0 0 15px 15px;

   padding: 0.5em;

   background-color: #917C6F;

   margin: 0 1em 0 1em;
}

.map-message-board
{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

   height: 10em;

   border: 3px solid #502D16;
   border-radius: 15px 15px 0 0;
   border-bottom: none;

   padding: 0.5em;
   margin: 0 1em 0 1em;

   background-color: #917C6F;

   display: flex;
   flex-flow: row;
   justify-content: space-between;
}

.map-container-centerer
{
   position: absolute;
   top: 4em;
   left: 16em;
   right: 21em;
   bottom: 11em;

   display: flex;
}

.map-container
{
   display: inline-block;
   max-height: 100%;
   max-width: 100%;
   /*
    * 4em: main-menu + margin.
    * 11em: message-board + margin.
    */
   /*margin: 0 1em 0 1em; */
   overflow: scroll;

   margin: auto;
   resize: both;

   border: 3px solid #502D16;
   border-radius: 15px;
}

.map-toolbox
{
   position: absolute;
   left: 0;
   top: 4em;
   width: 15em;
   /*
    * 4em: main-menu + margin.
    * 11em: message-board + margin.
    */
   height: calc(100% - 11em - 4em);

   display: flex;
   flex-flow: column;

   justify-content: space-between;

   padding: 0.5em;

   border: 3px solid #502D16;
   border-radius: 0 15px 15px 0;
   border-left: none;

   background-color: #917C6F;
}

.map-sub-menu
{
   position: absolute;
   right: 0;
   top: 4em;
   width: 20em;
   /*
    * 4em: main-menu + margin.
    * 11em: message-board + margin.
    */
   height: calc(100% - 11em - 4em);
   padding: 0.5em;
   overflow: auto;

   border: 3px solid #502D16;
   border-radius: 15px 0 0 15px;
   border-right: none;

   background-color: #917C6F;
}

/******************************************************************************/
/** MESSAGE BOARD *************************************************************/
/******************************************************************************/
.map-error
{
   background-color: #550000;
}

.map-message-board-help
{
   display: block;
}

.map-message-board-help h1
{
   margin: 0;
   margin-bottom: 0.3em;
   font-size: 1.5em;
   text-align: center;
}

.map-message-board-help-figure
{
   width: 1.5em;
   height: 1.5em;
   background-size: 100%;
   display: inline-block;
   vertical-align: middle;
}

.map-help-guide-icon
{
   margin-right: 0.5em;
   width: 1.5em;
   height: 1.5em;
   background-image: url("/asset/svg/help-icon.svg");
   background-size: 100%;
   display: inline-block;
   vertical-align: middle;
}

/******************************************************************************/
/** ??? ***********************************************************************/
/******************************************************************************/

/** Tile Card *****************************************************************/
.map-tile-card
{
   display: flex;
   flex-flow: column;
}

.map-tile-card-top
{
   margin-top: 0.5em;
   position: relative;
}

.map-character-portrait
{
   box-sizing: border-box;
   border-radius: 5px;
   background-size: 100% 100%;
   width: 100px;
   height: 100px;
   overflow: hidden;
}

.map-tile-card-icon
{
   box-sizing: border-box;
   border-radius: 5px;
   background-size: 300% 300%;
   width: 80px;
   height: 80px;
}

.map-tile-card-icon
{
   top: 0;
   left: 0;
   margin: 0;
   box-sizing: border-box;
   box-shadow:
      1px 0px 2px #333,
      -1px 0px 2px #333,
      0px 1px 2px #333,
      0px -1px 2px #333;
}

.map-character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); }
.map-character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); }
.map-character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); }
.map-character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); }
.map-character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); }
.map-character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); }
.map-character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); }
.map-character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); }

.map-tile-card-top
{
   margin:0.3em;
}

.map-tile-card-name,
.map-tile-card-cost,
.map-tile-card-location
{
   display:flex;
   justify-content:center;
   align-items:center;
   border-radius: 5px;
   background-color: #6C5D53;
   width: 100%;
}

.map-gauge
{
   position: relative;
   border-radius: 5px;
   border: 2px solid #6C5D53;
   text-align: center;
   height: 2em;
}

.map-gauge-text
{
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 1;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.map-gauge-bar
{
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 0;

   border-radius: 5px;
   z-index: 0;
   transition: width 3s ease-in-out;
}

.map-tile-card-cost
{
   position: absolute;
   left: 100px;
   top: 0;
   margin-left: 0.5em;
   width: calc(100% - 100px - 0.5em);
}

.map-tile-card-location
{
   position: absolute;
   left: 100px;
   top: calc(1.5em + 1em);
   margin-left: 0.5em;
   width: calc(100% - 100px - 0.5em);
}

/******************************************************************************/
/** MAIN MENU *****************************************************************/
/******************************************************************************/
.map-main-menu
{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

.map-main-menu button
{
   flex: 1;

   text-transform: uppercase;
}

/******************************************************************************/
/** SUB-MENU ******************************************************************/
/******************************************************************************/

/******************************************************************************/
/** Main View Elements ********************************************************/
/******************************************************************************/
.map-actual
{
   display: inline-block;
   transform-origin: top left;

   /*** Otherwise, it won't display correctly without 'transform: scale' ***/
   position: relative;
   background-color: #917C6F;
}

.map-tiled
{
   height: 32px;
   width: 32px;
   /** Fixes odd behavior of table cell being resized. **/
   /* min-width: 32px; */
   /* max-width: 32px; */
}

.map-tile-variant-0  {background-position: 0    0;}
.map-tile-variant-1  {background-position: 100% 0;}
.map-tile-variant-2  {background-position: 200% 0;}
.map-tile-variant-3  {background-position: 0    100%;}
.map-tile-variant-4  {background-position: 100% 100%;}
.map-tile-variant-5  {background-position: 200% 100%;}
.map-tile-variant-6  {background-position: 0    200%;}
.map-tile-variant-7  {background-position: 100% 200%;}
.map-tile-variant-8  {background-position: 200% 200%;}

.map-tile-icon       {z-index: 0; position: absolute; background-size: 300%;}