From 0d5c0c613d80db79b9382aa37cc8ead8e0158484 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 18:23:38 -0500
Subject: [PATCH] Add DRAW and DISCARD labels above deck and discard piles

Wrap each pile in a .pile-wrapper with a small label above it.
Fix direct child selectors that broke with the new wrapper nesting.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/index.html | 28 +++++++++++++++++-----------
 client/style.css  | 18 ++++++++++++++++--
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/client/index.html b/client/index.html
index e238279..07495e0 100644
--- a/client/index.html
+++ b/client/index.html
@@ -328,18 +328,24 @@
                                         </div>
                                         <span class="held-label">Holding</span>
                                     </div>
-                                    <div id="deck" class="card card-back"></div>
-                                    <div class="discard-stack">
-                                        <div id="discard" class="card">
-                                            <span id="discard-content"></span>
+                                    <div class="pile-wrapper">
+                                        <span class="pile-label">DRAW</span>
+                                        <div id="deck" class="card card-back"></div>
+                                    </div>
+                                    <div class="pile-wrapper">
+                                        <span class="pile-label">DISCARD</span>
+                                        <div class="discard-stack">
+                                            <div id="discard" class="card">
+                                                <span id="discard-content"></span>
+                                            </div>
+                                            <!-- Floating held card (appears larger over discard when holding) -->
+                                            <div id="held-card-floating" class="card card-front held-card-floating hidden">
+                                                <span id="held-card-floating-content"></span>
+                                            </div>
+                                            <button id="discard-btn" class="btn btn-small hidden">Discard</button>
+                                            <button id="skip-flip-btn" class="btn btn-small btn-secondary hidden">Skip Flip</button>
+                                            <button id="knock-early-btn" class="btn btn-small btn-danger hidden">Knock!</button>
                                         </div>
-                                        <!-- Floating held card (appears larger over discard when holding) -->
-                                        <div id="held-card-floating" class="card card-front held-card-floating hidden">
-                                            <span id="held-card-floating-content"></span>
-                                        </div>
-                                        <button id="discard-btn" class="btn btn-small hidden">Discard</button>
-                                        <button id="skip-flip-btn" class="btn btn-small btn-secondary hidden">Skip Flip</button>
-                                        <button id="knock-early-btn" class="btn btn-small btn-danger hidden">Knock!</button>
                                     </div>
                                 </div>
                             </div>
diff --git a/client/style.css b/client/style.css
index 69833ad..c70fc62 100644
--- a/client/style.css
+++ b/client/style.css
@@ -1124,6 +1124,20 @@ input::placeholder {
     align-items: flex-start;
 }
 
+.pile-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.pile-label {
+    font-size: 0.55rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    color: rgba(255, 255, 255, 0.4);
+    margin-bottom: 3px;
+}
+
 /* Gentle pulse when it's your turn to draw - handled by anime.js */
 /* The .your-turn-to-draw class triggers anime.js startTurnPulse() */
 
@@ -5154,7 +5168,7 @@ body.mobile-portrait .deck-area {
     align-items: flex-start;
 }
 
-body.mobile-portrait .deck-area > .card,
+body.mobile-portrait .deck-area .card,
 body.mobile-portrait #deck,
 body.mobile-portrait #discard {
     width: 64px !important;
@@ -5482,7 +5496,7 @@ body.mobile-portrait .ss-next-btn {
         padding: 3px 8px;
     }
 
-    body.mobile-portrait .deck-area > .card,
+    body.mobile-portrait .deck-area .card,
     body.mobile-portrait #deck,
     body.mobile-portrait #discard {
         width: 60px !important;