Remove mobile tap highlight

static/index.html

@@ -6,7 +6,7 @@
     <meta name="color-scheme" content="dark" />
     <meta name="theme-color" content="#111111" />
     <title>Пожитки</title>
-    <link rel="stylesheet" href="./styles.css?v=4" />
+    <link rel="stylesheet" href="./styles.css?v=5" />
     <script src="./telegram-web-app.js"></script>
     <script src="./app.js?v=4" defer></script>
   </head>

static/styles.css

@@ -15,7 +15,10 @@
   background: var(--bg);
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
 
 html, body { margin: 0; min-height: 100%; background: var(--bg); }
 
@@ -47,7 +50,18 @@ body::after {
 }
 
 button, input, select { font: inherit; color: inherit; }
-button { cursor: pointer; }
+button {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+button:focus { outline: none; }
+button:focus-visible { outline: 2px solid rgba(255, 255, 255, .72); outline-offset: 2px; }
+button:active { filter: brightness(.88); }
 
 .shell { width: min(100%, 560px); margin: 0 auto; }
 .topbar { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 26px; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }