Make overlapped hand cards legible with a corner index

Both hands overlap, and the centered value is buried on every card but the
topmost one, so a tightly packed hand became unreadable. Cards overlap
left-over-right, so the one strip that stays visible is each card's left edge --
which is exactly where the top corner already sat. The markup had the corner index
all along; it just wasn't carrying its weight.

So the top-left corner gets a small ivory backing chip and a size bump, which lets
it read even when it falls over the card behind it -- the same reason a fanned
hand of playing cards stays readable. The rival's revealed cards had their corner
index hidden entirely (mini cards set it to display:none); it's re-enabled, scaled
to the 44px card, and their overlap eased from -17 to -14px to give it room.

Verified in a browser at 900/1180/1400px: an eight-card hand overlapping at 900px
now reads every card off its corner, and the rival's revealed cards read off
theirs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XBQKgvBbxbheiTF1AVy1Sh

web/src/styles.css

@@ -108,7 +108,7 @@ button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
   display: flex;
   transform: translateX(-50%);
 }
-.opponent-hand .card { margin-left: -17px; }
+.opponent-hand .card { margin-left: -14px; }
 .opponent-hand .card:first-child { margin-left: 0; }
 
 .menu-wrap { position: absolute; top: 16px; right: 24px; z-index: 20; }
@@ -367,15 +367,28 @@ button.card:disabled { cursor: default; }
 }
 .card__corner {
   position: absolute;
-  left: 8px;
+  left: 6px;
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--card-color);
   font-family: Georgia, serif;
 }
-.card__corner--top { top: 7px; }
+/* Cards overlap left-over-right, so the only strip that stays visible is each
+   card's left edge -- exactly where the top corner sits. It carries a small ivory
+   backing so the index reads even when it falls over the card behind it, which is
+   what lets the hand overlap tightly and still be legible. */
+.card__corner--top {
+  top: 6px;
+  z-index: 2;
+  padding: 2px 5px 3px;
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--ivory) 82%, transparent);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
+}
 .card__corner--bottom { right: 8px; bottom: 7px; left: auto; }
+.card__corner--top b { font-size: 20px; font-weight: 700; }
+.card__corner--top i { margin-top: 0; font-size: 13px; }
 .card__corner b { font-size: 18px; line-height: 1; }
 .card__corner i { margin-top: 1px; font-size: 12px; font-style: normal; line-height: 1; }
 .card__center {
@@ -418,11 +431,25 @@ button.card:disabled { cursor: default; }
   border-width: 2px;
   border-radius: 5px;
 }
-.card--mini .card__corner { display: none; }
+/* The rival's revealed cards overlap -14px, leaving a ~30px strip. The centered
-.card--mini .card__center { inset: 4px; }
+   value is buried on every card but the top one, so a small top-left index rides
-.card--mini .card__center b { font-size: 20px; }
+   in the visible strip -- the same trick as the player's hand, scaled down. */
-.card--mini .card__center i { margin-top: 2px; font-size: 11px; }
+.card--mini .card__corner--bottom { display: none; }
-.card--mini .card__center--handshake i { font-size: 19px; }
+.card--mini .card__corner--top {
+  top: 3px;
+  left: 3px;
+  padding: 1px 3px 2px;
+  border-radius: 5px;
+  flex-direction: row;
+  gap: 2px;
+  align-items: baseline;
+}
+.card--mini .card__corner--top b { font-size: 13px; }
+.card--mini .card__corner--top i { font-size: 8px; }
+.card--mini .card__center { inset: 4px; top: 14px; }
+.card--mini .card__center b { font-size: 17px; }
+.card--mini .card__center i { margin-top: 2px; font-size: 10px; }
+.card--mini .card__center--handshake i { font-size: 16px; }
 .card--mini .card__center small { display: none; }
 .card--mini::after { inset: 3px; border-radius: 3px; }
 .card--mini .card__flip-cover { border-radius: 5px; }