Better panel background

components/GameBoard.vue

@@ -127,11 +127,12 @@ function showWinnerScreen() {
 
 #player_list {
     min-height: 90%;
-    background: burlywood;
-    border: 5px solid darkgoldenrod;
+    background: rgba(0, 0, 0, 0.35);
+    border: 5px solid #000;
     border-radius: 10px;
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
     margin: 10px;
+    backdrop-filter: hue-rotate(73deg) blur(10px) contrast(90%) brightness(165%);
 }
 </style>
 

components/MarketCards.vue

@@ -65,11 +65,10 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
     margin: 10px;
     padding-left: 10px;
     padding-right: 10px;
+    padding-bottom: 10px;
     border-radius: 10px;
-    background: brown;
-    border: 5px solid darkred;
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
-
+    backdrop-filter: hue-rotate(625deg) blur(5px) brightness(80%);
 }
 
 .separator {

components/PlayerListElement.vue

@@ -118,7 +118,7 @@ const props = defineProps<Props>()
     grid-template-columns: min-content 1fr;
     grid-template-areas:
         "button     player";
-    border: 5px solid brown;
+    border: 5px solid black;
     min-height: 200px;
     position: relative;
 }

components/PlayerSlot.vue

@@ -144,9 +144,8 @@ function check_for_guard(player: Player) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button turn_icon"
-                            @click="checkEndTurn">END
-                            TURN</button>
+                        <button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
+                            @click="checkEndTurn">END TURN</button>
 
                         <div class="warning"
                             :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
@@ -275,6 +274,10 @@ function check_for_guard(player: Player) {
     height: 100%;
 }
 
+#end_turn.hidden {
+    visibility: hidden
+}
+
 .stack,
 .discard,
 .cards_container {
@@ -476,6 +479,7 @@ function check_for_guard(player: Player) {
 #player_info {
     display: flex;
     align-items: center;
+    min-width: 200px;
 }
 
 #player_banner.big {
@@ -483,10 +487,10 @@ function check_for_guard(player: Player) {
     left: 50%;
     transform: translateX(-50%);
     max-width: min-content;
-    background: burlywood;
-    border: 5px solid maroon;
+    border: 5px solid black;
     border-radius: 10px;
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+    backdrop-filter: blur(5px) brightness(80%) hue-rotate(0deg) grayscale(80%);
 }
 
 #player_stats {