added touch styling

adjusted countdown volume

src/App.vue

@@ -146,73 +146,7 @@ body {
   overflow: hidden;
 }
 
-// Large devices (desktops, less than 1200px)
+@import "media";
-@media screen and (max-width: 1199.98px) {
-  html,
-  body {
-    font-size: 1.1em;
-  }
-  .night-order em {
-    width: 30px;
-    height: 30px;
-  }
-  .fabled .night-order.first span {
-    left: 30px;
-  }
-}
-
-// Medium devices (tablets, less than 992px)
-@media screen and (max-width: 991.98px) {
-  html,
-  body {
-    font-size: 1em;
-  }
-  #controls svg {
-    font-size: 20px;
-  }
-  .night-order em {
-    width: 20px;
-    height: 20px;
-  }
-  .fabled .night-order.first span {
-    left: 20px;
-  }
-  #townsquare {
-    padding: 10px;
-  }
-}
-
-// Small devices (landscape phones, less than 768px)
-@media screen and (max-width: 767.98px) {
-  html,
-  body {
-    font-size: 0.9em;
-  }
-  .player > .name {
-    top: 0;
-  }
-}
-
-// Old phones
-@media screen and (max-width: 575.98px) {
-  html,
-  body {
-    font-size: 0.8em;
-  }
-}
-
-// odd aspect ratio
-@media (max-aspect-ratio: 11/7) {
-  .bluffs,
-  .fabled {
-    h3 {
-      max-width: 14vh;
-    }
-    ul {
-      flex-direction: column;
-    }
-  }
-}
 
 * {
   box-sizing: border-box;

src/components/TownSquare.vue

@@ -281,9 +281,7 @@ export default {
         .fold-leave-to {
           transform: perspective(200px) rotateY(-90deg);
         }
-      } @else {
+        // show ability tooltip on the left
-        // second half of players
-        z-index: $i - 1;
         .ability {
           right: 120%;
           left: auto;
@@ -294,7 +292,11 @@ export default {
             left: 100%;
           }
         }
+      } @else {
+        // second half of players
+        z-index: $i - 1;
       }
+
       > * {
         transform: rotate($rot * -1deg);
       }

src/media.scss

@@ -0,0 +1,78 @@
+/*** Media queries ***/
+// Large devices (desktops, less than 1200px)
+@media screen and (max-width: 1199.98px) {
+  html,
+  body {
+    font-size: 1.1em;
+  }
+  .night-order em {
+    width: 30px;
+    height: 30px;
+  }
+  .fabled .night-order.first span {
+    left: 30px;
+  }
+}
+
+// Medium devices (tablets, less than 992px)
+@media screen and (max-width: 991.98px) {
+  html,
+  body {
+    font-size: 1em;
+  }
+  #controls svg {
+    font-size: 20px;
+  }
+  .night-order em {
+    width: 20px;
+    height: 20px;
+  }
+  .fabled .night-order.first span {
+    left: 20px;
+  }
+  #townsquare {
+    padding: 10px;
+  }
+}
+
+// Small devices (landscape phones, less than 768px)
+@media screen and (max-width: 767.98px) {
+  html,
+  body {
+    font-size: 0.9em;
+  }
+  .player > .name {
+    top: 0;
+  }
+}
+
+// Old phones
+@media screen and (max-width: 575.98px) {
+  html,
+  body {
+    font-size: 0.8em;
+  }
+}
+
+// odd aspect ratio
+@media (max-aspect-ratio: 11/7) {
+  .bluffs,
+  .fabled {
+    h3 {
+      max-width: 14vh;
+    }
+    ul {
+      flex-direction: column;
+    }
+  }
+}
+
+// touch devices
+@media (hover: none) {
+  .circle li .reminder.add {
+    opacity: 1;
+    top: 0;
+    width: 35%;
+    padding-bottom: 35%;
+  }
+}