Ronny
6c3ad56515
Shows animated reveal overlay for unseen match results. Exact match (3pts) triggers confetti explosion. Each reveal shown only once (localStorage tracking). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
92 lines
1.6 KiB
CSS
92 lines
1.6 KiB
CSS
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface-mid);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px 24px;
|
|
text-align: center;
|
|
max-width: 320px;
|
|
width: 90%;
|
|
animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.result {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.tipLine {
|
|
font-size: 0.95rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.badgeExact {
|
|
background: linear-gradient(135deg, var(--gold), #FFD700);
|
|
color: #1a1a1a;
|
|
animation: shimmer 2s ease-in-out;
|
|
}
|
|
|
|
.badgeTendency {
|
|
background: var(--success);
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.badgeWrong {
|
|
background: var(--text-muted);
|
|
color: var(--bg-deep);
|
|
}
|
|
|
|
.label {
|
|
font-size: 1rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dismissBtn {
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px 32px;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { transform: scale(0.8); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
|
|
50% { box-shadow: 0 0 20px rgba(254, 174, 50, 0.6); }
|
|
100% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
|
|
}
|