diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index c4fe691..4858cd1 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -17,8 +17,7 @@ const discard_unwrapped = ref<boolean>(false)
             </PlayerListElement>
         </div>
         <div id="current_player">
-            <input type="checkbox" v-model="discard_unwrapped">
-            <PlayerSlot v-for="p in current_players" :player="p" :discard_unwrapped="discard_unwrapped"></PlayerSlot>
+            <PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
         </div>
         <SelfView></SelfView>
     </div>
@@ -38,6 +37,8 @@ const discard_unwrapped = ref<boolean>(false)
 #player_list,
 #current_player {
     overflow: auto;
+    position: relative;
+    isolation: isolate;
 }
 
 #market {
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index b6935bd..265aa8c 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -17,14 +17,13 @@ import { CardEffects, type Effect } from "@/netcode/Effect";
 export interface Props {
     player: Player;
     hide_stack_and_discard?: boolean;
-    discard_unwrapped?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     hide_stack_and_discard: () => false,
-    discard_unwrapped: () => false,
 })
 
+const discard_unwrapped = ref(false)
 const isPlayerTurn = computed(() => props.player.team === goStore.current_game?.current_turn);
 const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
 const isSelfTurn = computed(() => goStore.self?.team === goStore.current_game?.current_turn)
@@ -64,26 +63,32 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
                 </CardsGrouped>
                 <span>stack =</span>
             </div>
+            <div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
+                @click="() => discard_unwrapped = false"></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"
-                    v-for="c in props.player.discard_pile">
-                    <template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
+                <div class="discard_container" @click="() => discard_unwrapped = true">
+                    <CardsGrouped :stack="props.player.discard_pile" v-if="!discard_unwrapped"> </CardsGrouped>
+                    <CardPreview :tilted="false" v-if="discard_unwrapped" :card_id="c.card_id"
+                        v-for="c in props.player.discard_pile">
+                        <template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
 
-                        <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)" @click.stop="sacrifice(c)">
-                            SACRIFICE
-                        </button>
-                        <button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)"
-                            @click.stop="restack_discarded_champion(c)">
-                            RESTACK_DISCARDED_CHAMPION
-                        </button>
-                        <button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)"
-                            @click.stop="restack_discarded_card(c)">
-                            RESTACK_DISCARDED_CARD
-                        </button>
+                            <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)"
+                                @click.stop="sacrifice(c)">
+                                SACRIFICE
+                            </button>
+                            <button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)"
+                                @click.stop="restack_discarded_champion(c)">
+                                RESTACK_DISCARDED_CHAMPION
+                            </button>
+                            <button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)"
+                                @click.stop="restack_discarded_card(c)">
+                                RESTACK_DISCARDED_CARD
+                            </button>
+
+                        </template>
+                    </CardPreview>
+                </div>
 
-                    </template>
-                </CardPreview>
             </div>
         </template>
         <div id="player_banner">
@@ -188,6 +193,35 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
     margin-top: 50px;
     grid-area: discard;
     justify-content: start;
+    cursor: pointer;
+    pointer-events: none;
+}
+
+.discard.unwrapped {
+    z-index: 9;
+    cursor: default;
+    position: absolute;
+}
+
+.discard_container {
+    display: flex;
+    /* background: blue; */
+    pointer-events: all;
+}
+
+#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 {