added more images and styling

css/circle.scss

@@ -5,6 +5,11 @@
   @for $i from 1 through $item-count {
     &:nth-child(#{$i}) {
       transform: rotate($rot * 1deg);
+      @if $i - 1 <= $item-count / 2 {
+        z-index: $item-count - $i + 1;
+      } @else {
+        z-index: $i - 1;
+      }
       > * {
         transform: rotate($rot * -1deg);
       }
@@ -36,7 +41,22 @@
       margin-left: -100px;
       width: 200px;
     }
+  }
+}
 
-    @include on-circle($item-count: 12);
+.circle.size-5 li { @include on-circle($item-count: 5); }
-  }
+.circle.size-6 li { @include on-circle($item-count: 6); }
-}
+.circle.size-7 li { @include on-circle($item-count: 7); }
+.circle.size-8 li { @include on-circle($item-count: 8); }
+.circle.size-9 li { @include on-circle($item-count: 9); }
+.circle.size-10 li { @include on-circle($item-count: 10); }
+.circle.size-11 li { @include on-circle($item-count: 11); }
+.circle.size-12 li { @include on-circle($item-count: 12); }
+.circle.size-13 li { @include on-circle($item-count: 13); }
+.circle.size-14 li { @include on-circle($item-count: 14); }
+.circle.size-15 li { @include on-circle($item-count: 15); }
+.circle.size-16 li { @include on-circle($item-count: 16); }
+.circle.size-17 li { @include on-circle($item-count: 17); }
+.circle.size-18 li { @include on-circle($item-count: 18); }
+.circle.size-19 li { @include on-circle($item-count: 19); }
+.circle.size-20 li { @include on-circle($item-count: 20); }

css/main.css

@@ -129,7 +129,7 @@ textarea {
         -1px 1px 0 #fff,
          1px 1px 0 #fff,
          0 0 5px rgba(0,0,0,0.75);
-    padding-top: 110px;
+    padding-top: 105px;
     box-sizing: border-box;
     font-family: 'PapyrusW01', serif;
     border: 3px solid black;
@@ -146,6 +146,17 @@ textarea {
     top: 0;
 }
 
+.square .player.dead:before {
+    content: " ";
+    background: url('../img/shroud.png') center -10px no-repeat;
+    background-size: 30%;
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    z-index: 2;
+    left: 0;
+}
+
 .square .name {
     font-size: 120%;
     line-height: 120%;

index.html

@@ -27,7 +27,7 @@
 <![endif]-->
 
 <div class="square">
-  <ul class="circle">
+  <ul class="circle size-12">
     <li>
       <div class="player">
         <div class="token spy"></div>
@@ -50,7 +50,7 @@
       <div class="reminder drunk">Drunk</div>
     </li>
     <li>
-      <div class="player">
+      <div class="player dead">
         <div class="token empath"></div>
         <div class="name">Steffen</div>
       </div>