Pokazywanie symbolu żetonu bonusowego jaki się dostanie za sprzedanie wybranych kart.

css/grid-template.css

@@ -13,6 +13,10 @@
     grid-template-rows: repeat(8, 1fr);
 }
 
+@media screen and (orientation: landscape){
+    /*.container {display: none; }*/
+}
+
 .group.leather { grid-area: leather; }
 .group.fabric { grid-area: fabric; }
 .group.spice { grid-area: spice; }

css/style.css

@@ -113,20 +113,51 @@
     visibility: hidden;
     border: 2px solid dodgerblue;
     margin: 1.5vh auto;
-    max-width: 18vw;
+    max-width: 100%;
     height: 5vh;
-    padding: 0.5vh 2vw;
+    padding: 0.5vh 0vw;
     font-weight: bold;
     font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
     background-color: #bedfff;
     cursor: pointer;
     line-height: 5vh;
     text-align: center;
+    display: flex;
+    justify-items: center;
+    flex-direction: row;
+    justify-content: space-around;
 }
 
+.acceptcontainer .bonus {
+    height: 5vh;
+    width: 5vh;
+    display: inline-block;
+    margin: 0;
+    border-radius: 50%;
+    border: 1px solid dodgerblue;
+    background: no-repeat #fff center center / 60% 60%;
+    display: none;
+}
+
+
+
+.acceptcontainer .bonus.bonus5 {
+    background-image: url(../bonus5.svg);
+}
+.acceptcontainer .bonus.bonus4 {
+    background-image: url(../bonus4.svg);
+}
+.acceptcontainer .bonus.bonus3 {
+    background-image: url(../bonus3.svg);
+}
+
+
 .accept.on {
     visibility: visible;
 }
+.accept.label {
+
+}
 
 .player1container {
     grid-area: player1container;