Better panel background

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 {