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


.battlemap-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;
}

.battlemap-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;
}

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

   display: flex;
}

.battlemap-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;
}

.battlemap-controlled
{
   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;
}

.battlemap-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 *************************************************************/
/******************************************************************************/
.battlemap-error
{
   background-color: #550000;
}

.battlemap-message-board .battlemap-character-card
{
   width: 16em;
}

.battlemap-message-attack-text
{
   width: 100%;
   text-align: center;
   font-size: 1.2em;
}

/******************************************************************************/
/** CONTROLLED PANEL **********************************************************/
/******************************************************************************/
.battlemap-controlled-actions
{
   display: flex;
   flex-flow: row wrap;

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

.battlemap-end-turn-button
{
   animation-name: reverse-brown-alarm-bg;
   animation-duration: 2s;
   animation-iteration-count: infinite;
}

/** Character Card ************************************************************/
.battlemap-character-card,
.battlemap-tile-card
{
   display: flex;
   flex-flow: column;
}

.battlemap-character-card-top,
.battlemap-tile-card-top
{
   margin-top: 0.5em;
   position: relative;
}

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

.battlemap-character-portrait
{
   cursor: pointer;
}

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

.battlemap-character-portrait *
{
   box-sizing: border-box;
   background-size: 100% 100%;
   width: inherit;
   height: inherit;
}

.battlemap-character-portrait-body
{
   z-index: 1;
}

.battlemap-character-portrait-armor
{
   position: relative;
   z-index: 1;
   top: -100%;
   background-size: 200% 100%;
}

.battlemap-character-card .battlemap-character-portrait,
.battlemap-tile-card-icon
{
   position: absolute:
   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;
}

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

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

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

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

.battlemap-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;
}

.battlemap-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;
}

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


.battlemap-character-card-health > .battlemap-gauge-bar
{
   background-color: darkred;
}

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

.battlemap-character-card-statuses
{
   position: absolute;
   left: 100px;
   top: calc(2*(1.5em + 0.5em) + 0.7em);
   margin-left: 0.5em;
   width: calc(100% - 100px - 0.5em);
   display: flex;
}

.battlemap-character-card-status
{
   height: 1.5em;
   width: 1.5em;
   background-size: 100%;
}

.battlemap-character-card-target-status
{
   background-image: url("/asset/svg/status/target.svg");
}

.battlemap-character-card-commander-status
{
   background-image: url("/asset/svg/status/commander.svg");
}

.battlemap-character-card-movement > .battlemap-gauge-bar
{
   background-color: darkgrey;
}

.battlemap-character-card-weapon,
.battlemap-character-card-weapon-summary
{
   display: grid;

   border-radius: 5px;

   padding: 0.3em;
   margin-top: 0.3em;
}

.battlemap-character-card-weapon
{
   background-color: #6C5D53;
}

.battlemap-character-card-weapon-summary
{
   background-color: #393939;
}

.battlemap-character-card-armor
{
   display: grid;
   border-radius: 5px;
   background-color: #6C5D53;

   padding: 0.3em;
   margin-top: 0.3em;
}

.battlemap-character-card-armor-stats
{
   display: grid;
   grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
}

.battlemap-character-card-stats
{
   display: grid;
   grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;

   border-radius: 5px;
   background-color: #6C5D53;

   padding: 0.3em;
   margin-top: 0.3em;
}

/** Manual Controls ***********************************************************/
.battlemap-manual-controls
{
   width: 96px;
   height: 96px;
   display: grid;
   grid-template:
      '.    top .'
      'left  go  right'
      '.   bottom .';
   margin: auto;
}

.battlemap-manual-controls > div
{
   width: 32px;
   height: 32px;
   background-image: url(/asset/svg/arrowhead.svg);
   background-size: 100%;
   transition: opacity 0.3s ease-out;
   opacity: 0.5;
}

.battlemap-manual-controls > div:hover
{
   opacity: 1;
}

.battlemap-manual-controls-go
{
   margin: auto;
   width: 28px;
   height: 28px;
   border-radius: 100em;
   grid-area: go;
}

.battlemap-manual-controls-up
{
   transform: rotate(-90deg);
   grid-area: top;
}

.battlemap-manual-controls-down
{
   transform: rotate(90deg);
   grid-area: bottom;
}

.battlemap-manual-controls-left
{
   transform: rotate(180deg);
   grid-area: left;
}

.battlemap-manual-controls-right
{
   grid-area: right;
}

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

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

   text-transform: uppercase;
}

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

.battlemap-characters-element-active
{
   animation-name: brown-alarm-bg;
   animation-duration: 5s;
   animation-iteration-count: infinite;
}



.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.5em;
}

.battlemap-timeline-element .battlemap-character-portrait
{
   display: inline-block;
   vertical-align: middle;
   width: 36px;
   height: 36px;
}

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

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

.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: 100% 0;}
.battlemap-tile-variant-2  {background-position: 200% 0;}
.battlemap-tile-variant-3  {background-position: 0    100%;}
.battlemap-tile-variant-4  {background-position: 100% 100%;}
.battlemap-tile-variant-5  {background-position: 200% 100%;}
.battlemap-tile-variant-6  {background-position: 0    200%;}
.battlemap-tile-variant-7  {background-position: 100% 200%;}
.battlemap-tile-variant-8  {background-position: 200% 200%;}

.battlemap-tile-icon       {z-index: 0; position: absolute; background-size: 300%;}
.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
{
   border-radius: 5px;
   height: 38px;
   margin-top: -6px;
}

.battlemap-character-icon *
{
   position: absolute;
   left: 0;
   top: 0;
   background-size: 100% 100%;
   width: inherit;
   height: inherit;
}

.battlemap-character-icon-enabled
{
   animation-name: pulsating;
   animation-duration: 1.5s;
   animation-iteration-count: infinite;
   transform-origin: center;
}

.battlemap-character-icon-banner { z-index: 2; }
.battlemap-character-icon-head { z-index: 1; }
.battlemap-character-icon-body { z-index: 0; }

.battlemap-character-ally
{
}

.battlemap-character-enemy
{
   transform: scale(-1, 1);
}

/** Navigator Markers *********************************************************/
.battlemap-marker-icon.battlemap-navigator-non-interactive
{
   box-sizing: border-box;
   width: 12px;
   height: 12px;
   background-size: 100%;
   margin: 10px;
}

.battlemap-marker-icon.battlemap-navigator-interactive
{
   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-can-defend-marker.battlemap-navigator-interactive
{
   background-color: #FFF;
   opacity: 0.3;
   transition: opacity 0.3s ease-out;
}

.battlemap-can-go-to-cant-defend-marker.battlemap-navigator-interactive
{
   background:
      repeating-linear-gradient(
        -55deg,
        rgb(255,255,255),
        rgb(255,255,255) 3px,
        rgba(0,0,0,0) 3px,
        rgba(0,0,0,0) 7px
      );
   opacity: 0.3;
   transition: opacity 0.3s ease-out;
}

.battlemap-can-go-to-can-defend-marker.battlemap-navigator-interactive:hover,
.battlemap-can-go-to-cant-defend-marker.battlemap-navigator-interactive:hover
{
   opacity: 0.9;
}

.battlemap-can-attack-can-defend-marker.battlemap-navigator-interactive
{
   background-color: #000;
   opacity: 0.7;
   width: 28px;
   /*min-width: 28px;
   max-width: 28px;*/
   height: 28px;
   margin: 2px 0 0 2px;
   border-radius: 0;
}

.battlemap-can-attack-cant-defend-marker.battlemap-navigator-interactive
{
   background:
      repeating-linear-gradient(
        -55deg,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 3px,
        rgb(0,0,0) 3px,
        rgb(0,0,0) 7px
      );
   width: 28px;
   /*min-width: 28px;
   max-width: 28px;*/
   opacity: 0.7;
   height: 28px;
   margin: 2px 0 0 2px;
   border-radius: 0;
}

.battlemap-can-attack-can-defend-marker.battlemap-navigator-non-interactive
{
   z-index: 5;
   background-image: url(/asset/svg/marker/blade.svg);
}

.battlemap-can-attack-cant-defend-marker.battlemap-navigator-non-interactive
{
   z-index: 5;
   background-image:
      url(/asset/svg/marker/blade.svg),
      url(/asset/svg/marker/brokenshield.svg);
}

.battlemap-can-go-to-cant-defend-marker.battlemap-navigator-non-interactive
{
   background-image:
      url(/asset/svg/marker/pawprint.svg),
      url(/asset/svg/marker/brokenshield.svg);
}

.battlemap-can-attack-cant-defend-marker.battlemap-navigator-non-interactive,
.battlemap-can-go-to-cant-defend-marker.battlemap-navigator-non-interactive
{
   width: 24px;
   height: 24px;
   background-position: top left, bottom right;
   background-size: 50%, 50%;
   background-repeat: no-repeat, no-repeat;
   margin: 2px;
}

.battlemap-can-go-to-can-defend-marker.battlemap-navigator-non-interactive
{
   background-image: url(/asset/svg/marker/pawprint.svg);
}

.battlemap-can-attack-can-defend-marker.battlemap-navigator-non-interactive,
.battlemap-can-attack-cant-defend-marker.battlemap-navigator-non-interactive
{
   z-index: 5;
}

.battlemap-can-go-to-can-defend-marker,
.battlemap-can-go-to-cant-defend-marker
{
   z-index: 3;
}

.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-ally.battlemap-character-icon-disabled
{
   filter: contrast(35%);
}


/**** Selection Classes *******************************************************/
.battlemap-character-targeted
{
   background-color: rgba(255,0,0,0.7);
   animation-name: red-alarm-bg;
   animation-duration: 5s;
   animation-iteration-count: infinite;
}

.battlemap-character-selected
{
   animation-name: strongly-pulsating;
   animation-duration: 1.5s;
   animation-iteration-count: infinite;
}

/**** 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-RR,
.battlemap-path-icon-LR,
.battlemap-path-icon-RL,
.battlemap-path-icon-LL
{
   background-position: 0 0;
}

.battlemap-path-icon-markN,
.battlemap-path-icon-NU,
.battlemap-path-icon-ND,
.battlemap-path-icon-NL,
.battlemap-path-icon-NR
{
   display: none;
}

.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-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);
}

/******************************************************************************/
/** Animations ****************************************************************/
/******************************************************************************/
@keyframes red-alarm-bg {
    0% {background-color: rgba(255,0,0,0.25);}
    25% {background-color: rgba(255,0,0,1);}
    50% {background-color: rgba(255,0,0,1);}
    100% {background-color: rgba(255,0,0,0.25);}
}

@keyframes pulsating {
    0% { opacity: 1.0; transform: scale(1);}
    25% { opacity: 1.0; transform: scale(1);}
    30% { opacity: 0.8; transform: scale(1.1);}
    50% { opacity: 1.0; transform: scale(1);}
    100% { opacity: 1.0; transform: scale(1);}
}

@keyframes strongly-pulsating {
    0% { opacity: 1.0; transform: scale(1);}
    50% { opacity: 0.8; transform: scale(1.5);}
    100% { opacity: 1.0; transform: scale(1);}
}

@keyframes brown-alarm-bg {
    0% {background-color: #917C6F;}
    25% {background-color: #AC9D93}
    50% {background-color: #AC9D93}
    100% {background-color: #917C6F;}
}

@keyframes reverse-brown-alarm-bg {
    0% {background-color: #917C6F;}
    50% {background-color: #502D16;}
    100% {background-color: #917C6F;}
}

@keyframes blue-alarm-bg {
    0% {background-color: rgba(0,0,255,0.2);}
    25% {background-color: rgba(0,0,255,0.8);}
    50% {background-color: rgba(0,0,255,0.8);}
    100% {background-color: rgba(0,0,255,0.2);}
}

@keyframes blinking {
   to { visibility: hidden; }
}

@keyframes blinking2 {
   from { opacity: 1; }
   to { opacity: 0; }
}

@keyframes dodges {
   0% { transform: translate(0, 0); }
   50% { transform: translate(-75%, 0); }
   100% { transform: translate(0, 0); }
}

@keyframes attacks {
   0% { transform: translate(0, 0); }
   25% { transform: translate(25%, 0); }
   100% { transform: translate(0, 0); }
}

@keyframes parries {
   0% { transform: translate(0, 0); }
   25% { transform: translate(-25%, 0); }
   50% { transform: translate(50%, 20%); }
   100% { transform: translate(0, 0); }
}

@keyframes dies {
   from { transform: translate(0, 0) rotate(0); }
   to { transform: translate(0, 100%) rotate(25deg); }
}

@keyframes blue-alarm-bd {
    0% {border-color: rgba(0,0,255,0.25);}
    25% {border-color: rgba(0,0,255,1);}
    100% {border-color: rgba(0,0,255,0.25);}
}

/******************************************************************************/
/** Timeline Animations *******************************************************/
/******************************************************************************/
/**** Character Icon Animations ***********************************************/
.battlemap-animated-character-icon
{
   transition: top linear 0.3s, left linear 0.3s;
}

/**** Character Portrait Animations *******************************************/
.battlemap-animated-portrait-damaged .battlemap-character-portrait > *
{
   animation: blinking 0.2s steps(2, start) 8;
}

.battlemap-animated-portrait-absent .battlemap-character-portrait > *
{
   visibility: hidden;
}

.battlemap-animated-portrait-dodges .battlemap-character-portrait,
.battlemap-animated-portrait-dies .battlemap-character-portrait,
.battlemap-animated-portrait-parries .battlemap-character-portrait,
.battlemap-animated-portrait-attacks .battlemap-character-portrait
{
   overflow: hidden;
}

.battlemap-animated-portrait
{
}

.battlemap-animated-portrait-dodges .battlemap-character-portrait > *
{
   animation-name: dodges;
   animation-duration: 1s;
   animation-iteration-count: 1;
}

.battlemap-animated-portrait-attacks .battlemap-character-portrait > *
{
   animation-name: attacks;
   animation-duration: 1s;
   animation-iteration-count: 1;
}

.battlemap-animated-portrait-dies .battlemap-character-portrait > *
{
   animation-name: blinking2, dies;
   animation-duration: 0.15s, 2s;
   animation-delay: 0s, 1s;
   animation-iteration-count: 8, 1;
}

.battlemap-animated-portrait-parries .battlemap-character-portrait > *
{
   animation-name: parries;
   animation-duration: 1s;
   animation-iteration-count: 1;
}