stuff for mobile

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}%`,
-        background: playerTeam.ready ? 'forestgreen' : 'whitesmoke',
+        width: `${displayPct}%`,
+        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>
     );