/* TAN wallet look for the claim page (Phantom-style). Builds on base.css + claim.css. transform/opacity animations only. */
.claim .wrap.wl, .claim .wl-foot { width: min(540px, 100% - 32px); }
.wl { padding-top: max(14px, env(safe-area-inset-top)); }
.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 16px; border-bottom: 1px solid var(--line); }
.wl-id { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.wl-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.wl-title { display: flex; flex-direction: column; line-height: 1.15; }
.wl-title b { font-weight: 560; font-size: 18px; white-space: nowrap; }
.wl-title small { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; color: #7a8a97; }
.wl-follow { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 99px; background: var(--text); color: #00141b; font-weight: 600; font-size: 15px; text-decoration: none; flex: none; transition: transform .2s var(--ease); }
.wl-follow svg { width: 15px; height: 15px; } .wl-follow:active { transform: scale(.97); }

.wl-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 24px 2px 20px; }
.wl-amt { font: 640 clamp(58px, 17vw, 84px)/.95 var(--f-display); letter-spacing: -.055em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-int { color: var(--text); } .wl-dec { color: #45525d; }
.wl-sub { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--accent-2); white-space: nowrap; }
.wl-coin { position: relative; width: 92px; height: 92px; flex: none; margin-right: 12px; }
.wl-coin img { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 50%; animation: wlFloat 4.2s var(--ease) infinite; }
.wl-coin i { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(63,208,240,.32); animation: wlPing 3s ease-out infinite; }
.wl-coin i:nth-child(3) { animation-delay: 1.5s; }
@keyframes wlFloat { 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes wlPing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

.wl-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wl-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1 / .92; border: 0; border-radius: 22px; background: #0c1219; color: #cfe3ec; font: 600 14px/1 var(--f-body); cursor: pointer; transition: transform .2s var(--ease); }
.wl-act svg { width: 26px; height: 26px; color: var(--accent); }
.wl-act:active { transform: scale(.96); }

.wl-tabs { display: flex; align-items: baseline; gap: 22px; margin: 26px 2px 14px; }
.wl-tabs a { text-decoration: none; font: 500 30px/1 var(--f-display); letter-spacing: -.03em; color: #45525d; display: inline-flex; align-items: center; gap: 10px; }
.wl-tabs a.on { color: var(--text); }
.wl-badge { font: 600 13px/1 var(--f-body); padding: 7px 11px; border-radius: 99px; background: rgba(63,208,240,.14); color: var(--accent-2); letter-spacing: 0; }
.wl-badge b { font-weight: 600; }
.wl-token { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.wl-token img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.wl-token-name, .wl-token-val { display: flex; flex-direction: column; line-height: 1.25; }
.wl-token-name { flex: 1; min-width: 0; } .wl-token-val { text-align: right; }
.wl-token b { font-weight: 560; font-size: 16px; } .wl-token small { font-size: 13px; color: #7a8a97; }

/* the claim flow + board + feed inside the narrow wallet column */
.wl .flow, .wl .board { max-width: none; margin-top: 18px; }
.wl .stepcard { border-radius: 22px; border-color: rgba(63,208,240,.28); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); }
.wl .stepcard h3 { font-weight: 600; letter-spacing: -.03em; }
.wl .btn { font-weight: 600; }
.wl .live { margin-top: 36px; }
.wl .live-head h2 { font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.wl .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl .stats div:last-child { grid-column: 1 / -1; }
.wl .stats dd { font-weight: 640; }
.wl .feed li { grid-template-columns: 36px minmax(0, 1fr) auto; }
.wl .feed .what { display: none; }
.wl-foot { justify-content: space-between; }
.wl-toast { position: fixed; left: 50%; bottom: 22px; z-index: 70; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: #0e151d; border: 1px solid rgba(255,255,255,.14); font-size: 14px; opacity: 0; transform: translate(-50%, 20px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.wl-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 380px) { .wl-act { border-radius: 18px; font-size: 13px; } .wl-tabs a { font-size: 26px; } .wl-coin, .wl-coin img { width: 72px; height: 72px; } }
html:has(body.claim) { overflow-x: clip; }
.claim .wl { overflow-x: clip; }
.wl-upto { font: 600 12px/1 var(--f-mono); letter-spacing: .22em; color: var(--accent-2); margin-bottom: 8px; }
.wl-amt { font-size: clamp(46px, 13vw, 72px); }
.wl-amt.win .wl-int { color: var(--accent-2); text-shadow: 0 0 28px rgba(63,208,240,.45); }
.bd-usd { margin: 4px 0 0; color: var(--accent-2); font: 600 15px/1.2 var(--f-mono); letter-spacing: .04em; }
.wl .feed .who b em.won { font-style: normal; color: var(--accent-2); font-weight: 600; }
.wl-tick { margin-top: 4px; font: 600 18px/1 var(--f-display); letter-spacing: -.02em; color: #45525d; }
.wl-ends { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(63,208,240,.4); background: rgba(63,208,240,.1); color: var(--accent-2); font: 600 13px/1 var(--f-mono); letter-spacing: .06em; }
.wl-ends b { color: var(--text); font-variant-numeric: tabular-nums; }

/* TAN: minimal wallet. Neutral greys, one accent (cyan) on icons + key numbers only. */
.wl-head { border-bottom: 0; }
.wl-title b { font-family: var(--f-display); font-weight: 700; letter-spacing: .01em; }
.wl-title b em { font-style: normal; color: var(--text); }
.wl-follow { background: var(--text); color: #0a0a0b; }
.wl-amt { font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; }
.wl-amt .wl-dec { color: #4a4a50; }
.wl-amt.win .wl-int { color: var(--text); text-shadow: none; }
.wl-tick { font-family: var(--f-display); font-weight: 600; color: #6e6e75; }
.wl-tick b { color: #6e6e75; font-weight: 600; }
.wl-upto { color: #8e8e93; }
.wl-sub { color: #8e8e93; } .wl-sub .dot { background: var(--accent); }
.wl-coin i { border-color: rgba(255,255,255,.08); }

/* the four tiles, like the reference: flat grey, no border, accent icon, grey label */
.wl-act { aspect-ratio: auto; height: 104px; gap: 10px; border: 0; border-radius: 28px; background: #1c1c1e; color: #b0b0b5; font: 600 17px/1 var(--f-body); }
.wl-act svg { width: 28px; height: 28px; color: var(--accent); }
.wl-act:hover { background: #222225; }

.wl-tabs a { font-family: var(--f-display); font-weight: 700; color: #3f3f45; }
.wl-tabs a.on { color: var(--text); }
.wl-badge { font-family: var(--f-mono); background: #1c1c1e; color: #b0b0b5; }
.wl-token { background: #141416; border: 0; }
.wl-token-val b { color: var(--text); }
.wl .prog { background: #1c1c1e; }
.wl .prog i { background: var(--accent); }
.wl .prog-label { color: #8e8e93; }
.wl .stepcard { border: 0; background: #141416; }
.wl .stepcard h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; }
.wl .live-head h2 { font-family: var(--f-display); font-weight: 700; }
.wl .stats div { background: #141416; border: 0; }
.wl .stats dd { font-family: var(--f-display); }
.wl .btn.big { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.wl-brandline { display: none; }

.wl-balance > div:first-child { min-width: 0; }
.wl-sub { white-space: normal; }
@media (min-width: 441px) { .wl-coin { margin-right: 26px; } }
@media (max-width: 440px) { .wl-coin, .wl-coin img { width: 80px; height: 80px; } .wl-coin { margin-right: 6px; } .wl-act { height: 92px; border-radius: 24px; font-size: 15px; } .wl-act svg { width: 26px; height: 26px; } }