/******************************************************************************/
/** LAYOUT ********************************************************************/
/******************************************************************************/

.fullscreen-module
{
   display: grid;

   grid-template-columns: [col] 15em [col] auto [col] 20em;
   grid-template-rows: [row] 3em [row] auto [row] 10em;
   grid-gap: 1em;
}

.battlemap-main-menu
{
   grid-column: col 1 / span 3;
   grid-row: row 1;

   display: flex;

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

   border: 1px solid #502D16;
   border-top: none;
   border-radius: 0 0 15px 15px;
   box-shadow:
      -1px 0px 2px #502D16,
       1px 0px 2px #502D16,
       0px 1px 2px #502D16;

   padding: 0.5em;

   background-color: rgba(145,124,111,1);

   margin: 0 1em 0 1em;
}

.battlemap-help
{
   grid-column: col 1 / span 3;
   grid-row: row 3;

   border: 1px solid #502D16;
   border-radius: 15px 15px 0 0;
   border-bottom: none;
   box-shadow:
      -1px  0px 2px #502D16,
       1px  0px 2px #502D16,
       0px -1px 2px #502D16;

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

   background-color: rgba(145,124,111,1);
}

.battlemap-error
{
   background-color: rgba(85,0,0,1);
}

/** Main Content **************************************************************/
.battlemap-container
{
   grid-column: col 2;
   grid-row: row 2;

   display: flex;
   margin: 0 1em 0 1em;
   max-width: 100%;
   max-height: 100%;
   overflow: scroll;

   margin: auto;

   border: 1px solid #502D16;
   border-radius: 15px;
   box-shadow:
      -1px  0px 2px #502D16,
       1px  0px 2px #502D16,
       0px -1px 2px #502D16,
       0px  1px 2px #502D16;
}

.battlemap-controlled
{
   grid-column: col 1;
   grid-row: row 2;

   display: flex;
   flex-flow: column;

   align-items: center;
   justify-content: center;

   padding: 0.5em;

   border: 1px solid #502D16;
   border-radius: 0 15px 15px 0;
   border-left: none;
   box-shadow:
       1px  0px 2px #502D16,
       0px -1px 2px #502D16,
       0px  1px 2px #502D16;

   background-color: rgba(145,124,111,1);
}

.battlemap-sub-menu
{
   grid-column: col 3;
   grid-row: row 2;

   padding: 0.5em;
   overflow: auto;

   border: 1px solid #502D16;
   border-radius: 15px 0 0 15px;
   border-right: none;
   box-shadow:
      -1px  0px 2px #502D16,
       0px -1px 2px #502D16,
       0px  1px 2px #502D16;

   background-color: rgba(145,124,111,1);
}

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

   /*** Otherwise, it won't display correctly without 'transform: scale' ***/
   position: relative;
   background-color: rgba(145,124,111,1);
}

/******************************************************************************/
/** RIGHT PANEL ***************************************************************/
/******************************************************************************/
.battlemap-side-bar
{
   flex-grow: 1;
   overflow-y: auto;
   width: inherit;
   height: inherit;
   word-wrap: break-word;
   display: flex;
   flex-direction: column;
   padding: 0.5em;
   color: #FFEEAA;
   border-left: 1px solid #502D16;
   box-shadow: -1px 0px 2px #502D16;
}

.battlemap-tabmenu
{
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   width: inherit;
}

/** Tab Menu Specifics ********************************************************/
.battlemap-main-menu
{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

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

   text-transform: uppercase;
}

.battlemap-tabmenu-content
{
   flex: 1;
}

/** General *******************************************************************/
.battlemap-side-bar-targets
{
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   width: inherit;
}

.battlemap-float-left { float: left; }
.battlemap-float-right { float: right; }

.battlemap-manual-controls
{
   max-height: 30%;
   width: inherit;
   flex: initial;

   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

/** Tabs **********************************************************************/

/**** Characters Tab */
.battlemap-tabmenu-characters-tab
{
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   flex-wrap: wrap;
}

.battlemap-character-portrait,
.battlemap-timeline-portrait
{
   margin: 0.5em;
   box-sizing: border-box;
   border: 2px solid rgba(0,0,0,0.5);
   width: 100px;
   height: 100px;
}

.battlemap-timeline-element,
.battlemap-characters-element
{
   flex: 2;
   margin: 0.5em 0.5em 0 0.5em;
   text-align: center;
   border-radius: 5px;
   border: 1px solid #502D16;
   border-bottom-width: 2px;
   padding: 0.05em;
}

.battlemap-tabmenu-characters-tab .battlemap-character-portrait
{
   width: 64px;
   height: 64px;
   float: left;
}

.battlemap-timeline-portrait
{
   display: inline-block;
   vertical-align: middle;
   width: 36px;
   height: 36px;
}
/******************************************************************************/
/** Main View Elements ********************************************************/
/******************************************************************************/
.battlemap-tiled
{
   height: 32px;
   width: 32px;
   /** Fixes odd behavior of table cell being resized. **/
   /* min-width: 32px; */
   /* max-width: 32px; */
}

.battlemap-tile-variant-0  {background-position: 0    0;}
.battlemap-tile-variant-1  {background-position: 32px 0;}
.battlemap-tile-variant-2  {background-position: 64px 0;}
.battlemap-tile-variant-3  {background-position: 0    32px;}
.battlemap-tile-variant-4  {background-position: 32px 32px;}
.battlemap-tile-variant-5  {background-position: 64px 32px;}
.battlemap-tile-variant-6  {background-position: 0    64px;}
.battlemap-tile-variant-7  {background-position: 32px 64px;}
.battlemap-tile-variant-8  {background-position: 64px 64px;}

.battlemap-tile-icon       {z-index: 0; position: absolute; background-size: 96px 96px;}
.battlemap-path-icon-below-markers {z-index: 1;}
.battlemap-marker-icon     {z-index: 2;}
.battlemap-path-icon-above-markers {z-index: 3;}
.battlemap-character-icon  {z-index: 4;}

.battlemap-marker-icon,
.battlemap-character-icon,
.battlemap-path-icon
{
   position: absolute;
}
.battlemap-tiles-layer
{
   /*display: table; */
}

.battlemap-tiles-layer-row
{
  /* display: table-row; */
}

.battlemap-character-icon
{
   box-sizing: border-box;
   border: 2px solid rgba(0,0,0,0.5);
}

.battlemap-character-ally
{
   border-radius: 25px 25px 0 25px;
}

.battlemap-character-enemy
{
   border-radius: 25px 25px 25px 0;
}

.battlemap-marker-icon
{
   box-sizing: border-box;
   width: 24px;
   /*min-width: 24px;
   max-width: 24px; */
   margin: 4px 0 0 4px;
   height: 24px;
   border-radius: 4px;
   border: none;
   box-shadow:
      1px 0px 2px #333,
      -1px 0px 2px #333,
      0px 1px 2px #333,
      0px -1px 2px #333;
}

.battlemap-can-go-to-marker
{
   background-color: #FFF;
   opacity: 0.3;
}

.battlemap-can-go-to-marker:hover
{
   background-color: rgba(255, 255, 255, 0.9);
   opacity: 1;
}

.battlemap-can-attack-marker
{
   background-color:rgba(0,0,0,0.7);
   width: 28px;
   /*min-width: 28px;
   max-width: 28px;*/
   height: 28px;
   margin: 2px 0 0 2px;
   border-radius: 0;
}

.battlemap-cant-defend-marker
{
   background:
      repeating-linear-gradient(
        -55deg,
        rgba(255,255,255,0.3),
        rgba(255,255,255,0.3) 3px,
        rgba(0,0,0,0.3) 3px,
        rgba(0,0,0,0.3) 7px
      );
}

.battlemap-character-icon-disabled
{
   opacity: 0.4;
   filter: grayscale(50%);
   border: 2px dotted rgba(0,0,0,0.7);
}

/**** Path Icons **************************************************************/
.battlemap-path-icon
{
   background-image: url("/asset/svg/arrows.svg");
   background-size: 96px 32px;
}

.battlemap-path-icon-UR,
.battlemap-path-icon-LD,
.battlemap-path-icon-RD,
.battlemap-path-icon-UL,
.battlemap-path-icon-LU,
.battlemap-path-icon-DR,
.battlemap-path-icon-DL,
.battlemap-path-icon-RU
{
   /*** Default is -^ ***/
   background-position: 64px 0;
}
/*** DL/RU ***/

.battlemap-path-icon-LU,
.battlemap-path-icon-DR
{
   transform: rotate(90deg);
}

.battlemap-path-icon-RD,
.battlemap-path-icon-UL
{
   /***  ***/
   transform: scale(1, -1);
}

.battlemap-path-icon-UR,
.battlemap-path-icon-LD
{
   /*** <| ***/
   transform: rotate(180deg);
}

.battlemap-path-icon-NR,
.battlemap-path-icon-NL,
.battlemap-path-icon-RR,
.battlemap-path-icon-LR,
.battlemap-path-icon-RL,
.battlemap-path-icon-LL
{
   background-position: 0 0;
}

.battlemap-path-icon-NU,
.battlemap-path-icon-ND,
.battlemap-path-icon-UU,
.battlemap-path-icon-UD,
.battlemap-path-icon-DU,
.battlemap-path-icon-DD
{
   background-position: 0 0;
   transform: rotate(90deg);
}

.battlemap-path-icon-markN,
.battlemap-path-icon-markR,
.battlemap-path-icon-markL,
.battlemap-path-icon-markU,
.battlemap-path-icon-markD
{
   background-position: 32px 0;
}

.battlemap-path-icon-markL
{
   transform: rotate(180deg);
}

.battlemap-path-icon-markD
{
   transform: rotate(90deg);
}

.battlemap-path-icon-markU
{
   transform: rotate(-90deg);
}