stuff for mobile

client/cryps.css

@@ -404,7 +404,7 @@ header {
     height: 0.25em;
 
     border: none;
-    margin: 0.5em 0;
+    margin: 1em 0;
 }
 
 .timer {
@@ -739,7 +739,7 @@ table td svg {
     color: whitesmoke;
 }
 
-.game-cryp button[disabled] {
+.game-cryp button[disabled], .game-cryp button[disabled]:hover {
     color: #333333;
     font-size: 14pt;
     text-decoration: line-through
@@ -908,7 +908,7 @@ CRYP DAMAGE
     main {
         flex: 1 1 auto;
         flex-flow: column;
-        overflow: hidden;
+        overflow-x: hidden;
     }
 
     main.game {
@@ -1014,15 +1014,6 @@ CRYP DAMAGE
         width: 100%;
     }
 
-    .mobile-spacer {
-        flex: 1 1 25%;
-        flex-flow: column;
-        display: block;
-        height: 95%;
-        padding: 0 2em 0 2em;
-        justify-content: center;
-    }
-
     .game .timer-container {
         order: 5;
         flex: unset;

client/src/components/game.component.jsx

@@ -89,9 +89,19 @@ function GamePanel(props) {
     const now = Date.now();
     const end = Date.parse(game.phase_end);
     const timerPct = ((now - zero) / (end - zero) * 100);
+    const displayPct = resolution
+        ? 0
+        : Math.min(timerPct, 100);
+
+    const displayColour = playerTeam.ready
+        ? 'forestgreen'
+        : timerPct > 80
+            ? 'red'
+            : 'whitesmoke';
+
     const timerStyles = {
-        width: `${timerPct < 100 && !resolution ? timerPct : 0}%`,
+        width: `${displayPct}%`,
-        background: playerTeam.ready ? 'forestgreen' : 'whitesmoke',
+        background: displayColour,
     };
 
     const timer = (
@@ -169,7 +179,6 @@ function GamePanel(props) {
             {header}
             {timer}
             {PlayerTeam(playerTeam, setActiveSkill)}
-            <div className="mobile-spacer">&nbsp;</div>
             <TargetingArrows />
             {otherTeams.map(OpponentTeam)}
         </main>

client/src/components/skill.btn.jsx

@@ -53,7 +53,7 @@ function Skill(props) {
         : '';
 
     const cdText = cryp.skills[i].cd > 0
-        ? `- ${s.cd}`
+        ? `- ${s.cd}T`
         : '';
 
     const highlight = activeSkill

client/src/components/targeting.arrows.jsx

@@ -56,7 +56,7 @@ function TargetSvg(args) {
         : outgoing.map(getPath);
 
     return (
-        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg">
+        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg" transform='rotate(-90)'>
             {arrows}
         </svg>
     );