diff --git a/web/src/styles.css b/web/src/styles.css
index 55e45d0..12e043a 100644
--- a/web/src/styles.css
+++ b/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; }
-.card--mini .card__center { inset: 4px; }
-.card--mini .card__center b { font-size: 20px; }
-.card--mini .card__center i { margin-top: 2px; font-size: 11px; }
-.card--mini .card__center--handshake i { font-size: 19px; }
+/* The rival's revealed cards overlap -14px, leaving a ~30px strip. The centered
+   value is buried on every card but the top one, so a small top-left index rides
+   in the visible strip -- the same trick as the player's hand, scaled down. */
+.card--mini .card__corner--bottom { display: none; }
+.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; }