3 files changed, 128 insertions, 15 deletions
diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss
index 2a52fe6..6001d39 100644
--- a/src/css/src/battle/controlled-panel.scss
+++ b/src/css/src/battle/controlled-panel.scss
@@ -19,16 +19,22 @@
 
    display: flex;
    flex-flow: column;
-   justify-content: space-between;
+   justify-content: space-evenly;
 }
 
-.controlled-actions
+.controlled-controls
 {
    display: flex;
-   flex-flow: row wrap;
+   flex-flow: row;
+}
 
-   align-items: center;
-   justify-content: center;
+.controlled-actions
+{
+   width: 50%;
+   display: grid;
+   grid-template-columns: 33% 33% 33%;
+   grid-gap: 2px;
+   justify-content: space-evenly;
 }
 
 .end-turn-button
@@ -39,3 +45,4 @@
 }
 
 @import 'controlled-panel/manual-control';
+@import 'controlled-panel/buttons';
diff --git a/src/css/src/battle/controlled-panel/buttons.scss b/src/css/src/battle/controlled-panel/buttons.scss
new file mode 100644
index 0000000..fb55a61
--- /dev/null
+++ b/src/css/src/battle/controlled-panel/buttons.scss
@@ -0,0 +1,115 @@
+.action-button
+{
+   width: 42px;
+   height: 42px;
+   background-size: 97%;
+   background-position: center;
+}
+
+.action-button.disabled
+{
+   opacity: 0.1;
+   pointer-events:none;
+}
+
+.action-button + .action-button
+{
+   margin: 0;
+}
+
+.action-button.abort-button
+{
+   background-image: url(/asset/svg/damage_type/abort.svg);
+}
+
+.action-button.skipping
+{
+   --bg-first-act: url(/asset/svg/damage_type/skip.svg);
+   --bg-second-act: var(--bg-first-act);
+   background-image: var(--bg-first-act);
+}
+
+.action-button.path-button
+{
+   --bg-first-act: url(/asset/svg/damage_type/move.svg);
+   background-image: var(--bg-first-act);
+}
+
+.action-button.attacking
+{
+   --bg-second-act: url(/asset/svg/damage_type/attack.svg);
+   background-image: var(--bg-second-act);
+}
+
+.action-button.using-skill
+{
+   --bg-second-act: url(/asset/svg/damage_type/skill.svg);
+   background-image: var(--bg-second-act);
+}
+
+.action-button.switching-weapons
+{
+   --bg-second-act: url(/asset/svg/damage_type/swapwp.svg);
+   background-image: var(--bg-second-act);
+}
+
+.action-button.end-turn-button
+{
+   grid-column: span 3;
+   width: calc(100% - 2px);
+   --bg-end-turn: url(/asset/svg/damage_type/endturn.svg);
+}
+
+.action-button.end-turn-button.disabled
+{
+   animation: none;
+}
+
+.action-button.end-turn-button.no-path-was-queued
+{
+   background-image: var(--bg-second-act), var(--bg-end-turn);
+   background-size: 42px, 42px;
+   background-repeat: no-repeat, no-repeat;
+   background-position: left center, right center;
+}
+
+.action-button.end-turn-button.path-was-queued
+{
+   background-size: 42px, 42px, 42px;
+   background-repeat: no-repeat, no-repeat, no-repeat;
+   background-position: left center, center, right center;
+   background-image:
+      url(/asset/svg/damage_type/move.svg),
+      var(--bg-second-act),
+      var(--bg-end-turn);
+}
+
+.action-button.end-turn-button.no-path-was-queued,
+.action-button.end-turn-button.path-was-queued.no-action
+{
+   background-size: 42px, 42px;
+   background-repeat: no-repeat, no-repeat;
+   background-position: left center, right center;
+   background-image:
+      var(--bg-first-act),
+      var(--bg-end-turn);
+}
+
+.action-button.undo
+{
+   border-bottom-width: 1px;
+   filter: brightness(0.8);
+
+}
+.action-button.end-turn-button.no-path-was-queued
+{
+   background-image: var(--bg-second-act), var(--bg-end-turn);
+}
+
+.action-button.end-turn-button.path-was-queued.no-action
+{
+   background-image:
+      url(/asset/svg/damage_type/move.svg),
+      var(--bg-end-turn);
+}
+
diff --git a/src/css/src/battle/controlled-panel/manual-control.scss b/src/css/src/battle/controlled-panel/manual-control.scss
index 7ab41b6..f4f5d99 100644
--- a/src/css/src/battle/controlled-panel/manual-control.scss
+++ b/src/css/src/battle/controlled-panel/manual-control.scss
@@ -5,7 +5,7 @@
    display: grid;
    grid-template:
       '.    top .'
-      'left  go  right'
+      'left  .  right'
       '.   bottom .';
    margin: auto;
 }
@@ -25,15 +25,6 @@
    opacity: 1;
 }
 
-.manual-controls-go
-{
-   margin: auto;
-   width: 28px;
-   height: 28px;
-   border-radius: 100em;
-   grid-area: go;
-}
-
 .manual-controls-up
 {
    transform: rotate(-90deg);