"Battlemap" -> "Battle".

1 files changed, 1059 insertions, 0 deletions

diff --git a/src/battle/www/style.css b/src/battle/www/style.css
new file mode 100644
index 0000000..af30c76
--- /dev/null
+++ b/src/battle/www/style.css
@@ -0,0 +1,1059 @@
+/******************************************************************************/
+/** LAYOUT ********************************************************************/
+/******************************************************************************/
+.fullscreen-module {}
+
+
+.battle-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;
+}
+
+.battle-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;
+}
+
+.battle-container-centerer
+{
+   position: absolute;
+   top: 4em;
+   left: 16em;
+   right: 21em;
+   bottom: 11em;
+
+   display: flex;
+}
+
+.battle-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;
+}
+
+.battle-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;
+}
+
+.battle-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 *************************************************************/
+/******************************************************************************/
+.battle-error
+{
+   background-color: #550000;
+}
+
+.battle-message-board .battle-character-card
+{
+   width: 16em;
+}
+
+.battle-message-attack-text
+{
+   width: 100%;
+   text-align: center;
+   font-size: 1.2em;
+}
+
+.battle-message-board-help
+{
+   display: block;
+}
+
+.battle-message-board-help h1
+{
+   margin: 0;
+   margin-bottom: 0.3em;
+   font-size: 1.5em;
+   text-align: center;
+}
+
+.battle-message-board-help-figure
+{
+   width: 1.5em;
+   height: 1.5em;
+   background-size: 100%;
+   display: inline-block;
+   vertical-align: middle;
+}
+
+.battle-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;
+}
+
+/******************************************************************************/
+/** CONTROLLED PANEL **********************************************************/
+/******************************************************************************/
+.battle-controlled-actions
+{
+   display: flex;
+   flex-flow: row wrap;
+
+   align-items: center;
+   justify-content: center;
+}
+
+.battle-end-turn-button
+{
+   animation-name: reverse-brown-alarm-bg;
+   animation-duration: 2s;
+   animation-iteration-count: infinite;
+}
+
+/** Character Card ************************************************************/
+.battle-character-card,
+.battle-tile-card
+{
+   display: flex;
+   flex-flow: column;
+}
+
+.battle-character-card-top,
+.battle-tile-card-top
+{
+   margin-top: 0.5em;
+   position: relative;
+}
+
+.battle-character-portrait
+{
+   box-sizing: border-box;
+   border-radius: 5px;
+   background-size: 100% 100%;
+   width: 100px;
+   height: 100px;
+   overflow: hidden;
+}
+
+.battle-character-portrait
+{
+   cursor: pointer;
+}
+
+.battle-tile-card-icon
+{
+   box-sizing: border-box;
+   border-radius: 5px;
+   background-size: 300% 300%;
+   width: 80px;
+   height: 80px;
+}
+
+.battle-character-portrait *
+{
+   box-sizing: border-box;
+   background-size: 100% 100%;
+   width: inherit;
+   height: inherit;
+}
+
+.battle-character-portrait-body
+{
+   z-index: 1;
+}
+
+.battle-character-portrait-armor
+{
+   position: relative;
+   z-index: 1;
+   top: -100%;
+   background-size: 200% 100%;
+}
+
+.battle-character-card .battle-character-portrait,
+.battle-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;
+}
+
+.battle-character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); }
+.battle-character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); }
+.battle-character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); }
+.battle-character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); }
+.battle-character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); }
+.battle-character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); }
+.battle-character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); }
+.battle-character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); }
+
+.battle-tile-card-top
+{
+   margin:0.3em;
+}
+
+.battle-character-card-name,
+.battle-tile-card-name,
+.battle-tile-card-cost,
+.battle-tile-card-location
+{
+   display:flex;
+   justify-content:center;
+   align-items:center;
+   border-radius: 5px;
+   background-color: #6C5D53;
+   width: 100%;
+}
+
+.battle-gauge
+{
+   position: relative;
+   border-radius: 5px;
+   border: 2px solid #6C5D53;
+   text-align: center;
+   height: 2em;
+}
+
+.battle-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;
+}
+
+.battle-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;
+}
+
+.battle-character-card-health,
+.battle-tile-card-cost
+{
+   position: absolute;
+   left: 100px;
+   top: 0;
+   margin-left: 0.5em;
+   width: calc(100% - 100px - 0.5em);
+}
+
+
+.battle-character-card-health > .battle-gauge-bar
+{
+   background-color: darkred;
+}
+
+.battle-character-card-movement,
+.battle-tile-card-location
+{
+   position: absolute;
+   left: 100px;
+   top: calc(1.5em + 1em);
+   margin-left: 0.5em;
+   width: calc(100% - 100px - 0.5em);
+}
+
+.battle-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;
+}
+
+.battle-character-card-status
+{
+   height: 1.5em;
+   width: 1.5em;
+   background-size: 100%;
+}
+
+.battle-character-card-target-status
+{
+   background-image: url("/asset/svg/status/target.svg");
+}
+
+.battle-character-card-commander-status
+{
+   background-image: url("/asset/svg/status/commander.svg");
+}
+
+.battle-character-card-movement > .battle-gauge-bar
+{
+   background-color: darkgrey;
+}
+
+.battle-character-card-weapon,
+.battle-character-card-weapon-summary
+{
+   display: grid;
+
+   border-radius: 5px;
+
+   padding: 0.3em;
+   margin-top: 0.3em;
+}
+
+.battle-character-card-weapon
+{
+   background-color: #6C5D53;
+}
+
+.battle-character-card-weapon-summary
+{
+   background-color: #393939;
+}
+
+.battle-character-card-armor
+{
+   display: grid;
+   border-radius: 5px;
+   background-color: #6C5D53;
+
+   padding: 0.3em;
+   margin-top: 0.3em;
+}
+
+.battle-character-card-armor-stats
+{
+   display: grid;
+   grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
+}
+
+.battle-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 ***********************************************************/
+.battle-manual-controls
+{
+   width: 96px;
+   height: 96px;
+   display: grid;
+   grid-template:
+      '.    top .'
+      'left  go  right'
+      '.   bottom .';
+   margin: auto;
+}
+
+.battle-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;
+}
+
+.battle-manual-controls > div:hover
+{
+   opacity: 1;
+}
+
+.battle-manual-controls-go
+{
+   margin: auto;
+   width: 28px;
+   height: 28px;
+   border-radius: 100em;
+   grid-area: go;
+}
+
+.battle-manual-controls-up
+{
+   transform: rotate(-90deg);
+   grid-area: top;
+}
+
+.battle-manual-controls-down
+{
+   transform: rotate(90deg);
+   grid-area: bottom;
+}
+
+.battle-manual-controls-left
+{
+   transform: rotate(180deg);
+   grid-area: left;
+}
+
+.battle-manual-controls-right
+{
+   grid-area: right;
+}
+
+/******************************************************************************/
+/** MAIN MENU *****************************************************************/
+/******************************************************************************/
+.battle-main-menu
+{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   justify-content: space-between;
+}
+
+.battle-main-menu button
+{
+   flex: 1;
+
+   text-transform: uppercase;
+}
+
+/******************************************************************************/
+/** SUB-MENU ******************************************************************/
+/******************************************************************************/
+.battle-tabmenu-characters-tab
+{
+   display: flex;
+   flex-grow: 1;
+   flex-direction: column;
+   flex-wrap: wrap;
+}
+
+.battle-characters-element-active
+{
+   animation-name: brown-alarm-bg;
+   animation-duration: 5s;
+   animation-iteration-count: infinite;
+}
+
+
+
+.battle-timeline-element,
+.battle-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;
+}
+
+.battle-timeline-element .battle-character-portrait
+{
+   display: inline-block;
+   vertical-align: middle;
+   width: 36px;
+   height: 36px;
+}
+
+/******************************************************************************/
+/** Main View Elements ********************************************************/
+/******************************************************************************/
+.battle-actual
+{
+   display: inline-block;
+   transform-origin: top left;
+
+   /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+   position: relative;
+   background-color: #917C6F;
+}
+
+.battle-tiled
+{
+   height: 32px;
+   width: 32px;
+   /** Fixes odd behavior of table cell being resized. **/
+   /* min-width: 32px; */
+   /* max-width: 32px; */
+}
+
+.battle-tile-variant-0  {background-position: 0    0;}
+.battle-tile-variant-1  {background-position: 100% 0;}
+.battle-tile-variant-2  {background-position: 200% 0;}
+.battle-tile-variant-3  {background-position: 0    100%;}
+.battle-tile-variant-4  {background-position: 100% 100%;}
+.battle-tile-variant-5  {background-position: 200% 100%;}
+.battle-tile-variant-6  {background-position: 0    200%;}
+.battle-tile-variant-7  {background-position: 100% 200%;}
+.battle-tile-variant-8  {background-position: 200% 200%;}
+
+.battle-tile-icon       {z-index: 0; position: absolute; background-size: 300%;}
+.battle-path-icon-below-markers {z-index: 1;}
+.battle-marker-icon     {z-index: 2;}
+.battle-path-icon-above-markers {z-index: 3;}
+.battle-character-icon  {z-index: 4;}
+
+.battle-marker-icon,
+.battle-character-icon,
+.battle-path-icon
+{
+   position: absolute;
+}
+.battle-tiles-layer
+{
+   /*display: table; */
+}
+
+.battle-tiles-layer-row
+{
+  /* display: table-row; */
+}
+
+.battle-character-icon
+{
+   border-radius: 5px;
+   height: 38px;
+   margin-top: -6px;
+}
+
+.battle-character-icon *
+{
+   position: absolute;
+   left: 0;
+   top: 0;
+   background-size: 100% 100%;
+   width: inherit;
+   height: inherit;
+}
+
+.battle-character-icon-enabled
+{
+   animation-name: pulsating;
+   animation-duration: 1.5s;
+   animation-iteration-count: infinite;
+   transform-origin: center;
+}
+
+.battle-character-icon-banner { z-index: 2; }
+.battle-character-icon-head { z-index: 1; }
+.battle-character-icon-body { z-index: 0; }
+
+.battle-character-ally
+{
+}
+
+.battle-character-enemy
+{
+   transform: scale(-1, 1);
+}
+
+/** Navigator Markers *********************************************************/
+.battle-marker-icon.battle-navigator-non-interactive
+{
+   box-sizing: border-box;
+   width: 12px;
+   height: 12px;
+   background-size: 100%;
+   margin: 10px;
+}
+
+.battle-marker-icon.battle-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;
+}
+
+.battle-can-go-to-can-defend-marker.battle-navigator-interactive
+{
+   background-color: #FFF;
+   opacity: 0.3;
+   transition: opacity 0.3s ease-out;
+}
+
+.battle-can-go-to-cant-defend-marker.battle-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;
+}
+
+.battle-can-go-to-can-defend-marker.battle-navigator-interactive:hover,
+.battle-can-go-to-cant-defend-marker.battle-navigator-interactive:hover
+{
+   opacity: 0.9;
+}
+
+.battle-can-attack-can-defend-marker.battle-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;
+}
+
+.battle-can-attack-cant-defend-marker.battle-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;
+}
+
+.battle-can-attack-can-defend-marker.battle-navigator-non-interactive
+{
+   z-index: 5;
+   background-image: url(/asset/svg/marker/blade.svg);
+}
+
+.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive
+{
+   z-index: 5;
+   background-image:
+      url(/asset/svg/marker/blade.svg),
+      url(/asset/svg/marker/brokenshield.svg);
+}
+
+.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive
+{
+   background-image:
+      url(/asset/svg/marker/pawprint.svg),
+      url(/asset/svg/marker/brokenshield.svg);
+}
+
+.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive,
+.battle-can-go-to-cant-defend-marker.battle-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;
+}
+
+.battle-can-go-to-can-defend-marker.battle-navigator-non-interactive
+{
+   background-image: url(/asset/svg/marker/pawprint.svg);
+}
+
+.battle-can-attack-can-defend-marker.battle-navigator-non-interactive,
+.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive
+{
+   z-index: 5;
+}
+
+.battle-can-go-to-can-defend-marker,
+.battle-can-go-to-cant-defend-marker
+{
+   z-index: 3;
+}
+
+.battle-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
+      );
+}
+
+.battle-character-ally.battle-character-icon-disabled
+{
+   filter: contrast(35%);
+}
+
+
+/**** Selection Classes *******************************************************/
+.battle-character-targeted
+{
+   background-color: rgba(255,0,0,0.7);
+   animation-name: red-alarm-bg;
+   animation-duration: 5s;
+   animation-iteration-count: infinite;
+}
+
+.battle-character-selected
+{
+   animation-name: strongly-pulsating;
+   animation-duration: 1.5s;
+   animation-iteration-count: infinite;
+}
+
+/**** Path Icons **************************************************************/
+.battle-path-icon
+{
+   background-image: url("/asset/svg/arrows.svg");
+   background-size: 96px 32px;
+}
+
+.battle-path-icon-UR,
+.battle-path-icon-LD,
+.battle-path-icon-RD,
+.battle-path-icon-UL,
+.battle-path-icon-LU,
+.battle-path-icon-DR,
+.battle-path-icon-DL,
+.battle-path-icon-RU
+{
+   /*** Default is -^ ***/
+   background-position: 64px 0;
+}
+/*** DL/RU ***/
+
+.battle-path-icon-LU,
+.battle-path-icon-DR
+{
+   transform: rotate(90deg);
+}
+
+.battle-path-icon-RD,
+.battle-path-icon-UL
+{
+   /***  ***/
+   transform: scale(1, -1);
+}
+
+.battle-path-icon-UR,
+.battle-path-icon-LD
+{
+   /*** <| ***/
+   transform: rotate(180deg);
+}
+
+.battle-path-icon-RR,
+.battle-path-icon-LR,
+.battle-path-icon-RL,
+.battle-path-icon-LL
+{
+   background-position: 0 0;
+}
+
+.battle-path-icon-markN,
+.battle-path-icon-NU,
+.battle-path-icon-ND,
+.battle-path-icon-NL,
+.battle-path-icon-NR
+{
+   display: none;
+}
+
+.battle-path-icon-UU,
+.battle-path-icon-UD,
+.battle-path-icon-DU,
+.battle-path-icon-DD
+{
+   background-position: 0 0;
+   transform: rotate(90deg);
+}
+
+.battle-path-icon-markR,
+.battle-path-icon-markL,
+.battle-path-icon-markU,
+.battle-path-icon-markD
+{
+   background-position: 32px 0;
+}
+
+.battle-path-icon-markL
+{
+   transform: rotate(180deg);
+}
+
+.battle-path-icon-markD
+{
+   transform: rotate(90deg);
+}
+
+.battle-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 ***********************************************/
+.battle-animated-character-icon
+{
+   transition: top linear 0.3s, left linear 0.3s;
+}
+
+/**** Character Portrait Animations *******************************************/
+.battle-animated-portrait-damaged .battle-character-portrait > *
+{
+   animation: blinking 0.2s steps(2, start) 8;
+}
+
+.battle-animated-portrait-absent .battle-character-portrait > *
+{
+   visibility: hidden;
+}
+
+.battle-animated-portrait-dodges .battle-character-portrait,
+.battle-animated-portrait-dies .battle-character-portrait,
+.battle-animated-portrait-parries .battle-character-portrait,
+.battle-animated-portrait-attacks .battle-character-portrait
+{
+   overflow: hidden;
+}
+
+.battle-animated-portrait
+{
+}
+
+.battle-animated-portrait-dodges .battle-character-portrait > *
+{
+   animation-name: dodges;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
+}
+
+.battle-animated-portrait-attacks .battle-character-portrait > *
+{
+   animation-name: attacks;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
+}
+
+.battle-animated-portrait-dies .battle-character-portrait > *
+{
+   animation-name: blinking2, dies;
+   animation-duration: 0.15s, 2s;
+   animation-delay: 0s, 1s;
+   animation-iteration-count: 8, 1;
+}
+
+.battle-animated-portrait-parries .battle-character-portrait > *
+{
+   animation-name: parries;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
+}