1 files changed, 53 insertions, 8 deletions

diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index fc8e962..5dd9325 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -61,6 +61,7 @@ main {
   flex-direction: column;
   align-items: center;
   padding: 4px;
+  border-radius: 20px;
   // background-color: yellow;
   // opacity: 0.5;
 }
@@ -74,6 +75,7 @@ main {
 .front[data-front-id='m'] {
   width: 104px;
   height: 114px;
+  border-radius: 23px;
 }
 
 .card {
@@ -122,6 +124,7 @@ main {
 }
 
 .card.action:hover,
+.card.selected,
 .front.action:hover,
 .standee.action:hover {
   box-shadow: 0 0 0 3px $selected-color;
@@ -137,12 +140,54 @@ main {
   }
 }
 
-#log { background-color: floralwhite; }
-#log .h1, #log .h2 {
-	font-size: 10px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	text-align: center;
+.bonus {
+  box-sizing: border-box;
+  position: absolute;
+  width: 54px;
+  height: 54px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+@for $i from 0 through 1 {
+  .bonus[data-bonus-id='#{$i}'][data-bonus-on='0'] {
+    background-image: url('images/bonus/bonus_#{$i}_off.png');
+  }
+  .bonus[data-bonus-id='#{$i}'][data-bonus-on='1'] {
+    background-image: url('images/bonus/bonus_#{$i}_on.png');
+  }
+}
+
+.medaillon {
+  box-sizing: border-box;
+  position: absolute;
+  width: 47px;
+  height: 47px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  box-shadow: 0 0 0 1px #333;
+  border-radius: 10px;
+}
+
+@for $i from 0 through 8 {
+  .medaillon[data-medaillon-id='#{$i}'] {
+    background-image: url('images/medaillons/medaillon_#{$i}.png');
+  }
+}
+
+#log {
+  background-color: floralwhite;
+}
+#log .h1,
+#log .h2 {
+  font-size: 10px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  text-align: center;
+}
+#log .h1 {
+  background-color: hsl(4, 40%, 73%);
+}
+#log .h2 {
+  background-color: hsl(250, 40%, 83%);
 }
-#log .h1 { background-color: hsl(4, 40%, 73%); }
-#log .h2 { background-color: hsl(250, 40%, 83%); }
\ No newline at end of file