/* Variant: Wallet — a fanned set of cards in a wallet. Dark navy and gold. */
:root {
  --bg: #0c1220; --surface: #141c2e; --muted: #0f1626; --ink: #f3f1ea; --ink-2: #a3a9b8; --line: #232d44;
  --accent: #d9b56a; --accent-ink: #1a1408; --accent-soft: #2e2716; --green-soft: #1a2236; --amber-soft: #2e2716;
  --night: #141c2e; --night-2: #1c2640; --night-line: rgba(255, 255, 255, 0.09); --night-ink: #f3f1ea; --night-ink-2: #a3a9b8;
  --ui-bg: #1b2438; --ui-line: #28324a; --ui-fill: #343f5a; --ui-fill-2: #20293e; --ui-strong: #f3f1ea; --ui-accent: #d9b56a; --ui-img: #2e2716;
  --ui-tint-a: #3a3220; --ui-tint-b: #2a3550; --ui-tint-c: #40281f;
  color-scheme: dark;
}
.wl { position: relative; height: clamp(22rem, 34vw, 28rem); }
.wl-pocket { position: absolute; left: 6%; right: 6%; bottom: 0; height: 36%; z-index: 4; border-radius: 22px; background: linear-gradient(160deg, #5a3a26, #3a2418); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 30px 50px -20px rgba(0, 0, 0, 0.8); }
.wl-pocket::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255, 220, 180, 0.25); border-radius: 16px; }
.wl-card { position: absolute; left: 12%; width: 76%; aspect-ratio: 1.586; display: flex; flex-direction: column; gap: 0.15rem; padding: clamp(14px, 2vw, 22px); border-radius: 18px; color: #ffffff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7); transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wl-card--1 { top: -6%; z-index: 1; background: linear-gradient(135deg, #e0457b, #8a2a5a); rotate: -4deg; }
.wl-card--2 { top: 15%; z-index: 2; background: linear-gradient(135deg, #3b6cff, #2a3a9a); rotate: 2deg; }
.wl-card--3 { top: 35%; z-index: 3; background: linear-gradient(135deg, #e8c47a, #a8823a); color: #1a1408; rotate: -1deg; }
.wl:hover .wl-card--1 { translate: -10% -18%; } .wl:hover .wl-card--2 { translate: 0 -22%; } .wl:hover .wl-card--3 { translate: 10% -16%; }
.wl-brand { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; }
.wl-chip { order: 2; width: 2.6rem; height: 2rem; margin-top: 0.75rem; border-radius: 6px; background: linear-gradient(135deg, #f4dfa5, #c9a453); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.wl-card b { order: 1; font-size: clamp(1.125rem, 2vw, 1.5rem); letter-spacing: -0.02em; }
.wl-num { order: 3; margin-top: auto; font-size: 0.8125rem; letter-spacing: 0.12em; opacity: 0.85; }
.wl-meta { position: absolute; right: clamp(14px, 2vw, 22px); top: clamp(14px, 2vw, 22px); display: grid; text-align: right; font-size: 0.75rem; font-weight: 600; }
.wl-meta small { font-size: 0.625rem; font-weight: 400; opacity: 0.75; }
.tile--dark { background: linear-gradient(160deg, #2e2716, #141c2e 70%); }