Adjust styles to be more compact with larger text.

fear_tracker/static/css/styles.css

@@ -1,3 +1,7 @@
+body {
+  font-size: 1.75em;
+}
+
 footer hr {
   border-width: 0;
   border-top: 1px solid lightgray;
@@ -148,8 +152,25 @@ footer a, footer a:visited {
 
 .player-body {
   display: none;
+  margin-left: 2ex;
+}
+
+.player-summary {
+  padding-left: 3ex;
+  text-indent: -3ex;
 }
 
 .player-visible:checked ~ .player-body {
   display: block;
 }
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+select, option {
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+}

fear_tracker/templates/game.html

@@ -61,7 +61,7 @@
         <div class="player-effects" id="player-{{ player.order }}-effects">
           {% for effect_num, effect in player.fear.items %}
           <div class="effect effect-{{ effect_num }}">
-            Effect #{{ effect_num|add:1 }}
+            #{{ effect_num|add:1 }}
 
             <input type="hidden" name="player-{{ player.order }}-effect-{{ effect_num }}-fear-orig" value="{{ effect.pure_fear }}">
             <select name="player-{{ player.order }}-effect-{{ effect_num }}-fear"{% if player.ready %} disabled{% endif %}>
@@ -106,7 +106,7 @@
 {% if not results_only %}
   <template id="effect-template">
     <div class="effect">
-      Effect #<span class="effect-num">?</span>
+      #<span class="effect-num">?</span>
 
       <input type="hidden" class="fear-orig" value="0">
       <select class="fear">