Moving to SCSS, theme improvements, index p. txt

30 files changed, 1474 insertions, 0 deletions

diff --git a/src/css/Makefile b/src/css/Makefile
new file mode 100644
index 0000000..b8e0575
--- /dev/null
+++ b/src/css/Makefile
@@ -0,0 +1,37 @@
+################################################################################
+## CONFIG ######################################################################
+################################################################################
+SRC_DIR ?= ${CURDIR}/src/
+TILE_CLASSES_DIR ?= ${CURDIR}/tile/class
+TILE_FRONTIER_DIR ?= ${CURDIR}/tile/frontier
+WWW_DIR ?= ${CURDIR}/www/
+
+SCSS_EXEC = scss
+################################################################################
+## MAKEFILE MAGIC ##############################################################
+################################################################################
+#INCLUDE_SCSS = $(shell find $(SRC_DIR)/shared/ -name ".scss")
+INCLUDE_SCSS = $(shell find $(SRC_DIR) -name "*.scss")
+SCSS_FILES = $(wildcard $(SRC_DIR)/*.scss)
+CSS_FILES = $(patsubst $(SRC_DIR)/%.scss,$(WWW_DIR)/%.css,$(SCSS_FILES))
+
+################################################################################
+## SANITY CHECKS ###############################################################
+################################################################################
+
+################################################################################
+## TARGET RULES ################################################################
+################################################################################
+build: $(CSS_FILES)
+
+clean:
+	rm -f $(CSS_FILES)
+
+reset:
+	$(MAKE) -C clean
+
+################################################################################
+## INTERNAL RULES ##############################################################
+################################################################################
+$(CSS_FILES): $(WWW_DIR)/%.css: $(SRC_DIR)/%.scss $(INCLUDE_SCSS)
+	$(SCSS_EXEC) $< > $@
diff --git a/src/css/src/battle.scss b/src/css/src/battle.scss
new file mode 100644
index 0000000..c671396
--- /dev/null
+++ b/src/css/src/battle.scss
@@ -0,0 +1,35 @@
+@import 'shared/colors';
+@import 'shared/shadows';
+
+*
+{
+   color: $GOLD-0;
+   @include text-shadow(1px, $BROWN-0, 0.5);
+}
+
+body
+{
+   background-color: $BROWN-2;
+}
+
+button
+{
+   flex: 1;
+
+   text-transform: uppercase;
+   background-color: $BROWN-3;
+   border-color: $BROWN-1;
+}
+
+button + button
+{
+   margin-left: 0.5em;
+}
+
+@import 'battle/controlled-panel';
+@import 'battle/info-card';
+@import 'battle/keyframes';
+@import 'battle/main-menu';
+@import 'battle/map';
+@import 'battle/message-board';
+@import 'battle/sub-menus';
diff --git a/src/css/src/battle/constants.scss b/src/css/src/battle/constants.scss
new file mode 100644
index 0000000..06a1e6b
--- /dev/null
+++ b/src/css/src/battle/constants.scss
@@ -0,0 +1,15 @@
+$MENU-MARGIN: 0.5em;
+$MENU-PADDING: 0.5em;
+$MENU-BORDER: 0.2em;
+
+$MAIN-MENU-HEIGHT: 3em;
+$MESSAGE-BOARD-HEIGHT: 10em;
+$CONTROLLED-MENU-WIDTH: 15em;
+$SUB-MENU-WIDTH: 20em;
+
+$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER;
+
+$NEXT-TO-CONTROLLED-MENU: $CONTROLLED-MENU-WIDTH + $MENU-EXTRA;
+$NEXT-TO-SUB-MENU: $SUB-MENU-WIDTH + $MENU-EXTRA;
+$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA;
+$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA;
diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss
new file mode 100644
index 0000000..7ac39f8
--- /dev/null
+++ b/src/css/src/battle/controlled-panel.scss
@@ -0,0 +1,45 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-controlled
+{
+   position: absolute;
+   display: block;
+   left: 0;
+   top: $BELOW-MAIN-MENU;
+   bottom: $ABOVE-MESSAGE-BOARD;
+
+   width: $CONTROLLED-MENU-WIDTH;
+
+   @include menu-background-color();
+
+   @include menu-padding();
+
+   @include menu-border();
+
+   border-top-left-radius: 0;
+   border-bottom-left-radius: 0;
+   border-left: none;
+
+   display: flex;
+   flex-flow: column;
+   justify-content: space-between;
+}
+
+.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;
+}
+
+@import 'controlled-panel/manual-control';
diff --git a/src/css/src/battle/controlled-panel/manual-control.scss b/src/css/src/battle/controlled-panel/manual-control.scss
new file mode 100644
index 0000000..765514b
--- /dev/null
+++ b/src/css/src/battle/controlled-panel/manual-control.scss
@@ -0,0 +1,58 @@
+.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;
+}
diff --git a/src/css/src/battle/info-card.scss b/src/css/src/battle/info-card.scss
new file mode 100644
index 0000000..29e4576
--- /dev/null
+++ b/src/css/src/battle/info-card.scss
@@ -0,0 +1,104 @@
+@import "../shared/colors";
+@import "../shared/shadows";
+
+.battle-info-card
+{
+   display: flex;
+   flex-flow: column;
+}
+
+.battle-info-card-top
+{
+   position: relative;
+
+   margin-top: 0.5em;
+}
+
+.battle-info-card-picture
+{
+   top: 0;
+   left: 0;
+
+   box-sizing: border-box;
+
+   border-radius: 5px;
+   overflow: hidden;
+
+   margin: 0;
+
+   @include box-shadow(2px, $BROWN-0, 1);
+
+   display: inline-block;
+}
+
+.battle-info-card-text-field
+{
+   display:flex;
+   justify-content:center;
+   align-items:center;
+   border-radius: 5px;
+   background-color: $BROWN-2;
+   width: 100%;
+}
+
+.battle-gauge
+{
+   position: relative;
+   border-radius: 5px;
+   border: 2px solid $BROWN-2;
+   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-movement,
+.battle-tile-card-location
+{
+   position: absolute;
+   left: 100px;
+   top: calc(1.5em + 1em);
+   margin-left: 0.5em;
+   width: calc(100% - 100px - 0.5em);
+}
+
+@import 'info-card/character';
+@import 'info-card/tile';
diff --git a/src/css/src/battle/info-card/character.scss b/src/css/src/battle/info-card/character.scss
new file mode 100644
index 0000000..3233be1
--- /dev/null
+++ b/src/css/src/battle/info-card/character.scss
@@ -0,0 +1,134 @@
+@import "../../shared/colors";
+
+.battle-character-portrait
+{
+   background-size: 100% 100%;
+   width: 100px;
+   height: 100px;
+   overflow: hidden;
+   cursor: pointer;
+}
+
+.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-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-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-health > .battle-gauge-bar
+{
+   background-color: $RED-3;
+}
+
+.battle-character-card-movement > .battle-gauge-bar
+{
+   background-color: $BLUE-3;
+}
+
+.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: $BROWN-1;
+}
+
+.battle-character-card-armor
+{
+   display: grid;
+   border-radius: 5px;
+   background-color: $BROWN-2;
+
+   padding: 0.3em;
+   margin-top: 0.3em;
+}
+
+.battle-character-card-armor-stats
+{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+}
+
+.battle-character-card-stats > *,
+.battle-character-card-armor-stats > *
+{
+   width: 25%;
+}
+
+.battle-character-card-stats
+{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+
+   border-radius: 5px;
+   background-color: $BROWN-2;
+
+   padding: 0.3em;
+   margin-top: 0.3em;
+}
diff --git a/src/css/src/battle/info-card/tile.scss b/src/css/src/battle/info-card/tile.scss
new file mode 100644
index 0000000..65ed591
--- /dev/null
+++ b/src/css/src/battle/info-card/tile.scss
@@ -0,0 +1,12 @@
+
+.battle-tile-card-icon
+{
+   background-size: 400%;
+   width: 80px;
+   height: 80px;
+}
+
+.battle-tile-card-top
+{
+   margin:0.3em;
+}
diff --git a/src/css/src/battle/keyframes.scss b/src/css/src/battle/keyframes.scss
new file mode 100644
index 0000000..049e9d5
--- /dev/null
+++ b/src/css/src/battle/keyframes.scss
@@ -0,0 +1,79 @@
+@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);}
+}
diff --git a/src/css/src/battle/main-menu.scss b/src/css/src/battle/main-menu.scss
new file mode 100644
index 0000000..1dfe02a
--- /dev/null
+++ b/src/css/src/battle/main-menu.scss
@@ -0,0 +1,41 @@
+@import '../shared/colors';
+
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-main-menu
+{
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+
+   height: $MAIN-MENU-HEIGHT;
+
+   @include menu-background-color();
+
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+
+   @include menu-border();
+   border-top: none;
+   border-top-left-radius: 0;
+   border-top-right-radius: 0;
+
+   @include menu-padding();
+
+   @include menu-margin();
+
+   margin-top: 0;
+
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   justify-content: space-between;
+}
+
+.battle-main-menu button:hover
+{
+   background-color: $BROWN-4;
+}
diff --git a/src/css/src/battle/map.scss b/src/css/src/battle/map.scss
new file mode 100644
index 0000000..c6ab64d
--- /dev/null
+++ b/src/css/src/battle/map.scss
@@ -0,0 +1,83 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-container-centerer
+{
+   position: absolute;
+
+   top: $BELOW-MAIN-MENU;
+   left: $NEXT-TO-CONTROLLED-MENU;
+   right: $NEXT-TO-SUB-MENU;
+   bottom: $ABOVE-MESSAGE-BOARD;
+
+   display: flex;
+}
+
+.battle-container
+{
+   display: inline-block;
+   max-height: 100%;
+   max-width: 100%;
+
+   overflow: scroll;
+
+   margin: auto;
+   resize: both;
+
+   @include menu-border();
+
+   @include menu-background-color();
+}
+
+.battle-actual
+{
+   display: inline-block;
+   transform-origin: top left;
+
+   /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+   position: relative;
+}
+
+.battle-tiled, .battle-tiled *
+{
+   height: 32px;
+   width: 32px;
+   /** Fixes odd behavior of table cell being resized. **/
+   /* min-width: 32px; */
+   /* max-width: 32px; */
+}
+
+.battle-tile-icon, .battle-tile-icon *
+{
+   z-index: 0;
+   position: absolute;
+   background-size: 400%;
+}
+
+.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; */
+}
+
+@import 'map/animation.scss';
+@import 'map/character.scss';
+@import 'map/marker.scss';
+@import 'map/path.scss';
+@import 'map/variant.scss';
diff --git a/src/css/src/battle/map/animation.scss b/src/css/src/battle/map/animation.scss
new file mode 100644
index 0000000..1e8f044
--- /dev/null
+++ b/src/css/src/battle/map/animation.scss
@@ -0,0 +1,4 @@
+.battle-animated-character-icon
+{
+   transition: top linear 0.3s, left linear 0.3s;
+}
diff --git a/src/css/src/battle/map/character.scss b/src/css/src/battle/map/character.scss
new file mode 100644
index 0000000..6856f61
--- /dev/null
+++ b/src/css/src/battle/map/character.scss
@@ -0,0 +1,58 @@
+.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);
+}
+
+.battle-character-ally.battle-character-icon-disabled
+{
+   filter: contrast(35%);
+}
+
+.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;
+}
+
diff --git a/src/css/src/battle/map/marker.scss b/src/css/src/battle/map/marker.scss
new file mode 100644
index 0000000..d6ec557
--- /dev/null
+++ b/src/css/src/battle/map/marker.scss
@@ -0,0 +1,145 @@
+.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
+      );
+}
+
diff --git a/src/css/src/battle/map/path.scss b/src/css/src/battle/map/path.scss
new file mode 100644
index 0000000..0d0b97d
--- /dev/null
+++ b/src/css/src/battle/map/path.scss
@@ -0,0 +1,88 @@
+.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);
+}
diff --git a/src/css/src/battle/map/variant.scss b/src/css/src/battle/map/variant.scss
new file mode 100644
index 0000000..ca8aa66
--- /dev/null
+++ b/src/css/src/battle/map/variant.scss
@@ -0,0 +1,33 @@
+
+.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: 300% 0;}
+
+.battle-tile-variant-4  {background-position: 0    100%;}
+.battle-tile-variant-5  {background-position: 100% 100%;}
+.battle-tile-variant-6  {background-position: 200% 100%;}
+.battle-tile-variant-7  {background-position: 300% 100%;}
+
+.battle-tile-variant-8  {background-position: 0    200%;}
+.battle-tile-variant-9  {background-position: 100% 200%;}
+.battle-tile-variant-10 {background-position: 200% 200%;}
+.battle-tile-variant-11 {background-position: 300% 200%;}
+
+.battle-tile-variant-12 {background-position: 0    300%;}
+.battle-tile-variant-13 {background-position: 100% 300%;}
+.battle-tile-variant-14 {background-position: 200% 300%;}
+.battle-tile-variant-15 {background-position: 300% 300%;}
+
+.battle-tile-icon-bg { z-index: 0; }
+.battle-tile-icon-dt { z-index: 9; }
+
+.battle-tile-icon-f-0 { z-index: 1; }
+.battle-tile-icon-f-1 { z-index: 2; }
+.battle-tile-icon-f-2 { z-index: 3; }
+.battle-tile-icon-f-3 { z-index: 4; }
+.battle-tile-icon-f-4 { z-index: 5; }
+.battle-tile-icon-f-5 { z-index: 6; }
+.battle-tile-icon-f-6 { z-index: 7; }
+.battle-tile-icon-f-7 { z-index: 8; }
+
diff --git a/src/css/src/battle/menu-mixins.scss b/src/css/src/battle/menu-mixins.scss
new file mode 100644
index 0000000..f7129a1
--- /dev/null
+++ b/src/css/src/battle/menu-mixins.scss
@@ -0,0 +1,24 @@
+@import '../shared/colors';
+
+@import 'constants';
+
+@mixin menu-border ()
+{
+   border: $MENU-BORDER solid $BROWN-1;
+   border-radius: 15px;
+}
+
+@mixin menu-margin ()
+{
+   margin: $MENU-MARGIN;
+}
+
+@mixin menu-padding ()
+{
+   padding: $MENU-PADDING;
+}
+
+@mixin menu-background-color ()
+{
+   background-color: $BROWN-3;
+}
diff --git a/src/css/src/battle/message-board.scss b/src/css/src/battle/message-board.scss
new file mode 100644
index 0000000..f2be3f7
--- /dev/null
+++ b/src/css/src/battle/message-board.scss
@@ -0,0 +1,45 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-message-board
+{
+   position: absolute;
+   bottom: 0;
+   left: 0;
+   right: 0;
+
+   height: $MESSAGE-BOARD-HEIGHT;
+
+   @include menu-background-color();
+
+   @include menu-border();
+   border-bottom: none;
+   border-bottom-left-radius: 0;
+   border-bottom-right-radius: 0;
+
+   @include menu-padding();
+
+   @include menu-margin();
+   margin-bottom: 0;
+
+   display: flex;
+   flex-flow: row;
+   justify-content: space-between;
+
+   overflow-y: auto;
+}
+
+/*
+.battle-message-board
+{
+   background: $BROWN-4;
+   color: $BROWN-0;
+   line-height: 1.3em;
+   font-size: 1.2em;
+   text-shadow: none;
+}
+*/
+
+@import 'message-board/attack';
+@import 'message-board/error';
+@import 'message-board/help';
diff --git a/src/css/src/battle/message-board/attack.scss b/src/css/src/battle/message-board/attack.scss
new file mode 100644
index 0000000..8f3a8cb
--- /dev/null
+++ b/src/css/src/battle/message-board/attack.scss
@@ -0,0 +1,63 @@
+.battle-message-board .battle-character-card
+{
+   width: 16em;
+}
+
+.battle-message-attack-text
+{
+   width: 100%;
+   text-align: center;
+   font-size: 1.2em;
+}
+
+/**** 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;
+}
diff --git a/src/css/src/battle/message-board/error.scss b/src/css/src/battle/message-board/error.scss
new file mode 100644
index 0000000..8c2c197
--- /dev/null
+++ b/src/css/src/battle/message-board/error.scss
@@ -0,0 +1,7 @@
+@import '../../shared/colors';
+
+.battle-error
+{
+   background-color: $RED-1;
+}
+
diff --git a/src/css/src/battle/message-board/help.scss b/src/css/src/battle/message-board/help.scss
new file mode 100644
index 0000000..ba35772
--- /dev/null
+++ b/src/css/src/battle/message-board/help.scss
@@ -0,0 +1,33 @@
+.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;
+}
+
diff --git a/src/css/src/battle/sub-menus.scss b/src/css/src/battle/sub-menus.scss
new file mode 100644
index 0000000..13ec571
--- /dev/null
+++ b/src/css/src/battle/sub-menus.scss
@@ -0,0 +1,26 @@
+@import 'constants';
+@import 'menu-mixins';
+
+.battle-sub-menu
+{
+   position: absolute;
+   right: 0;
+   top: $BELOW-MAIN-MENU;
+   bottom: $ABOVE-MESSAGE-BOARD;
+
+   width: $SUB-MENU-WIDTH;
+
+   @include menu-background-color();
+
+   @include menu-padding();
+
+   @include menu-border();
+   border-top-right-radius: 0;
+   border-bottom-right-radius: 0;
+   border-right: none;
+
+   overflow: auto;
+}
+
+@import 'sub-menus/characters-tab';
+@import 'sub-menus/timeline-tab';
diff --git a/src/css/src/battle/sub-menus/characters-tab.scss b/src/css/src/battle/sub-menus/characters-tab.scss
new file mode 100644
index 0000000..fc4aae6
--- /dev/null
+++ b/src/css/src/battle/sub-menus/characters-tab.scss
@@ -0,0 +1,27 @@
+@import '../../shared/colors';
+
+.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-characters-element
+{
+   flex: 2;
+   margin: 0.5em 0.5em 0 0.5em;
+
+   border-radius: 5px;
+   border: 1px solid $BROWN-1;
+   border-bottom-width: 2px;
+   padding: 0.5em;
+}
diff --git a/src/css/src/battle/sub-menus/timeline-tab.scss b/src/css/src/battle/sub-menus/timeline-tab.scss
new file mode 100644
index 0000000..cf9793c
--- /dev/null
+++ b/src/css/src/battle/sub-menus/timeline-tab.scss
@@ -0,0 +1,30 @@
+@import '../../shared/colors';
+@import '../../shared/shadows';
+
+.battle-timeline-element
+{
+   margin: 0.5em 0.5em 0 0.5em;
+   text-align: center;
+
+   border-radius: 5px;
+   border: 1px solid $BROWN-1;
+   border-bottom-width: 2px;
+   padding: 0.5em;
+}
+
+.battle-timeline-element .battle-character-portrait
+{
+   display: inline-block;
+   vertical-align: middle;
+   width: 36px;
+   height: 36px;
+
+   @include box-shadow(1px, $BROWN-0, 1);
+}
+
+.battle-timeline-element .battle-character-portrait + *
+{
+   border-radius: 5px;
+   margin-left: 1em;
+}
+
diff --git a/src/css/src/global.scss b/src/css/src/global.scss
new file mode 100644
index 0000000..ad19c93
--- /dev/null
+++ b/src/css/src/global.scss
@@ -0,0 +1,31 @@
+@import 'shared/colors';
+@import 'shared/parameters';
+@import 'shared/sanitize';
+@import 'shared/shadows';
+
+html, body, .fullscreen-module
+{
+   min-width: $MIN_PAGE_WIDTH;
+   min-height: $MIN_PAGE_HEIGHT;
+}
+
+button
+{
+   border-radius: 5px;
+   border-width: 1px;
+   border-style: solid;
+   border-bottom-width: 3px;
+   transition: background-color 0.3s ease-out;
+   font-variant: small-caps;
+}
+
+button:hover
+{
+   cursor: pointer;
+}
+
+.clickable
+{
+   cursor: pointer;
+   touch-action: manipulation;
+}
diff --git a/src/css/src/shared/colors.scss b/src/css/src/shared/colors.scss
new file mode 100644
index 0000000..6a5a054
--- /dev/null
+++ b/src/css/src/shared/colors.scss
@@ -0,0 +1,54 @@
+// Those colors were picked from Inkscape's collection.
+
+$BROWN-0: #241F1C;
+$BROWN-1: #483E37;
+$BROWN-2: #6C5D53;
+$BROWN-3: #917C6F;
+$BROWN-4: #AC9D93;
+$BROWN-5: #C8BEB7;
+$BROWN-6: #E3DEDB;
+
+$GOLD-0: #E9DDAF;
+$GOLD-1: #FFEEAA;
+
+$BLOOD-0: #550000;
+
+$RED-0: #280B0B;
+$RED-1: #501616;
+$RED-2: #782121;
+$RED-3: #A02C2C;
+$RED-4: #C83737;
+$RED-5: #D35F5F;
+$RED-6: #E9AFAF;
+
+$GREEN-0: #1C241C;
+$GREEN-1: #374837;
+$GREEN-2: #536C53;
+$GREEN-3: #6F916F;
+$GREEN-4: #93AC93;
+$GREEN-5: #B7C8B7;
+$GREEN-6: #DBE3DB;
+
+$BLUE-0: #1C1F24;
+$BLUE-1: #373E48;
+$BLUE-2: #535D6C;
+$BLUE-3: #6F7C91;
+$BLUE-4: #939DAC;
+$BLUE-5: #B7BEC8;
+$BLUE-6: #DBDEE3;
+
+$GLAUQUE-0: #1C2422;
+$GLAUQUE-1: #374845;
+$GLAUQUE-2: #536C67;
+$GLAUQUE-3: #6F918A;
+$GLAUQUE-4: #93ACA7;
+$GLAUQUE-5: #B7C8C4;
+$GLAUQUE-6: #DBE3E2;
+
+$PURPLE-0: #241C22;
+$PURPLE-1: #483745;
+$PURPLE-2: #6C5367;
+$PURPLE-3: #916F8A;
+$PURPLE-4: #AC93A7;
+$PURPLE-5: #C8B7C4;
+$PURPLE-6: #E3DBE2;
diff --git a/src/css/src/shared/parameters.scss b/src/css/src/shared/parameters.scss
new file mode 100644
index 0000000..908d739
--- /dev/null
+++ b/src/css/src/shared/parameters.scss
@@ -0,0 +1,2 @@
+$MIN-PAGE-WIDTH: 800px;
+$MIN-PAGE-HEIGHT: 600px;
diff --git a/src/css/src/shared/sanitize.scss b/src/css/src/shared/sanitize.scss
new file mode 100644
index 0000000..d341d19
--- /dev/null
+++ b/src/css/src/shared/sanitize.scss
@@ -0,0 +1,15 @@
+*
+{
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+}
+
+body, html
+{
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   right: 0;
+   left: 0;
+}
diff --git a/src/css/src/shared/shadows.scss b/src/css/src/shared/shadows.scss
new file mode 100644
index 0000000..4378dff
--- /dev/null
+++ b/src/css/src/shared/shadows.scss
@@ -0,0 +1,17 @@
+@mixin text-shadow ($size, $color, $alpha)
+{
+   text-shadow:
+      1px   0     $size rgba($color, $alpha),
+      -1px  0     $size rgba($color, $alpha),
+      0     1px   $size rgba($color, $alpha),
+      0     -1px  $size rgba($color, $alpha);
+}
+
+@mixin box-shadow ($size, $color, $alpha)
+{
+   box-shadow:
+      1px   0     $size rgba($color, $alpha),
+      -1px  0     $size rgba($color, $alpha),
+      0     1px   $size rgba($color, $alpha),
+      0     -1px  $size rgba($color, $alpha);
+}
diff --git a/src/css/src/verbose.scss b/src/css/src/verbose.scss
new file mode 100644
index 0000000..7a505a6
--- /dev/null
+++ b/src/css/src/verbose.scss
@@ -0,0 +1,129 @@
+@import 'shared/colors';
+@import 'shared/shadows';
+
+*
+{
+   color: $GOLD-0;
+   @include text-shadow(1px, $BROWN-0, 0.5);
+}
+
+body
+{
+   display: flex;
+   flex-direction: column;
+   background-color: $BROWN-2;
+}
+
+body > header
+{
+   display: flex;
+   flex-direction: row;
+}
+
+body > header nav
+{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   flex: 1;
+   align-items: center;
+   justify-content: space-around;
+}
+
+body > header nav a
+{
+   color: $GOLD-0;
+   transition: background-color 0.3s ease-out;
+   font-size: 1.5em;
+   font-variant: small-caps;
+   font-weight: bold;
+   text-decoration: none;
+   margin: 0.5em;
+}
+
+.main-server-logo
+{
+   z-index: 1;
+   margin: 0.5em;
+}
+
+.main-server-version
+{
+   z-index: 0;
+   position: absolute;
+   font-size: 0.7em;
+   top: 0;
+   right: 0;
+}
+
+main
+{
+   width: 100%;
+   flex: 1;
+
+   display: flex;
+   flex-direction: column;
+
+   align-items: center;
+}
+
+article:nth-of-type(1)
+{
+   margin-top: 0;
+}
+
+article
+{
+   display: inline-block;
+
+   background: $BROWN-4;
+
+   margin: 1em;
+   padding-bottom: 2em;
+
+   border: 1px solid $BROWN-0;
+
+   max-width: 80em;
+   min-width: 40em;
+}
+
+article > p
+{
+   margin: 0 3em 0.5em 3em;
+   line-height: 1.3em;
+   font-size: 1.2em;
+   color: $BROWN-0;
+   text-shadow: none;
+}
+
+article > header
+{
+   display: inline-block;
+   margin: -0.1em 0.5em 1em 0.5em;
+   border: 2px solid $GLAUQUE-1;
+   border-top-width: 1px;
+   border-radius: 0 0 8px 8px;
+   text-align: center;
+   padding: 0.5em 1em 0.5em 1em;
+   background: $GLAUQUE-2;
+   color: $GLAUQUE-6;
+   font-size: 1.5em;
+   font-variant: small-caps;
+   font-weight: bold;
+}
+
+article > h1
+{
+   display: inline-block;
+   background: $BLUE-2;
+   margin: 1em 0 1em -0.2em;
+   font-size: 1.2em;
+   font-variant: small-caps;
+   font-weight: normal;
+   border: 2px solid $BLUE-1;
+   border-left-width: 1px;
+   border-radius: 0 15px 15px 0;
+   color: $BLUE-6;
+   padding: 0.5em;
+   padding-left: 1.5em;
+}