Allow word groups and votes to wrap during the judging process.

[lmno.games] / empathy / empathy.css

diff --git a/empathy/empathy.css b/empathy/empathy.css
index d553597c6a4b2ca2b3f20b03d140668e5dee1bf6..704b54a5ac1759a1be929c4123a3c59cd8f343d4 100644 (file)
--- a/empathy/empathy.css
+++ b/empathy/empathy.css
@@ -6,11 +6,12 @@
     border-radius: 25px;
     font-size: 200%;
     padding: 1em;
-    margin-top: 0.25em;
+    margin-bottom: 0.25em;
 }
 
 .vote-choices {
     display: flex;
+    flex-wrap: wrap;
 }
 
 .vote-choice {
@@ -29,3 +30,25 @@
         color: var(--text-fg-on-accent);
     }
 }
+
+.ambiguity-group {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--accent-color);
+    margin-bottom: 0.25em;
+    padding: 0;
+    border-radius: 10px;
+}
+
+.ambiguity-button {
+    border-radius: 10px;
+    margin: 0;
+}
+
+.ambiguity-button.selected {
+    background-color: var(--accent-color-bright);
+    color: var(--text-fg-on-accent-bright);
+}