diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 91dc712..da09108 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -64,6 +64,7 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
                 </CardsGrouped>
                 <span>stack =</span>
             </div>
+            <div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"></div>
             <div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
                 <CardsGrouped :stack="props.player.discard_pile" v-if="!props.discard_unwrapped"> </CardsGrouped>
                 <CardPreview :tilted="false" v-if="props.discard_unwrapped" :card_id="c.card_id"
@@ -193,7 +194,30 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
     justify-content: start;
 }
 
+.discard.unwrapped {
+    z-index: 9;
+
+}
+
+
+#discard_unwrapped_bg {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 8;
+    background: rgba(0, 0, 0, 0.5)
+}
+
+#discard_unwrapped_bg.unwrapped {
+    display: block;
+}
+
 .player {
+    position: relative;
+    isolation: isolate;
     display: grid;
     grid-template-columns: min-content 1fr;
     grid-template-rows: min-content min-content 1fr;