Improve Japanese layout

- The button-styling has been adjusted, to make it easier to visually
  distinguish the view-changing buttons that switch to views with
  buttons for entering hiragana, katakana, symbols, and Latin letters.

- Easier switching between hiragana and katakana,
  and between symbols and punctuation.

- Added more placeholders to prevent layout-shifting.

- The base-shape is now sized properly on a 6" large display
  with a resolution of 720x1440 (PinePhone), without empty
  space next to it.

- The wide shape is now wider.

- The symbols- and punctuation-views switch back to the
  katakana-view when opened from it and "unlocking" the view
  by tapping multiple times on the view-changing button,
  instead of showing the hiragana-view.

Part-of: <https://gitlab.gnome.org/World/Phosh/squeekboard/-/merge_requests/644>

data/style.css

@@ -22,14 +22,16 @@ sq_button.subtle-highlight:active {
     background: alpha(@theme_fg_color, 0.16);
 }
 
-sq_button.emoji-group {
+sq_button.emoji-group,
+sq_button.character-group {
     background: alpha(@theme_fg_color, 0.105);
     border-bottom: 0.4999px;
     border-style: solid;
     border-color: alpha(@theme_fg_color, 0.25);
 }
 
-sq_button.emoji-group:active {
+sq_button.emoji-group:active,
+sq_button.character-group:active {
     background: alpha(@theme_fg_color, 0.16);
     border-bottom: 0.4999px;
     border-style: solid;