/* ============================================================ Picture Hunt — Daily Challenge Streak Styles 🔥📅 Add to index.html : ============================================================ */ /* ═══ DAILY CHALLENGE CARD (on splash screen) ═══ */ .daily-challenge-card { grid-column: 1 / -1; background: linear-gradient(135deg, var(--coral) 0%, var(--sun) 50%, var(--sky) 100%); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-2); color: var(--ink); box-shadow: 0 4px 0 var(--coral-deep), 0 10px 22px rgba(224,69,69,0.28); transition: transform var(--dur-fast), box-shadow var(--dur-fast); } .daily-challenge-card:active { transform: scale(0.97); } .daily-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .daily-label { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .daily-streak { font-size: 1.1rem; font-weight: 800; background: rgba(27,17,64,0.20); padding: 4px 12px; border-radius: 12px; } .daily-item { display: flex; align-items: center; gap: 12px; min-width: 0; } .daily-emoji { font-size: 2.5rem; line-height: 1; flex: 0 0 auto; } .daily-img { width: 3rem; height: 3rem; object-fit: contain; flex: 0 0 auto; } .daily-name { font-size: 1.1rem; font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; } .daily-status { margin-top: 8px; font-size: 0.95rem; font-weight: 700; text-align: center; padding: 6px; border-radius: 10px; } .daily-status.pending { background: var(--frost-soft); color: var(--ink); animation: daily-pulse 2s ease-in-out infinite; } .daily-status.done { background: rgba(45,212,164,0.45); color: var(--ink); } @keyframes daily-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ═══ BADGE POPUP ═══ */ .streak-badge-popup { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; align-items: center; animation: streak-badge-pop 3s ease forwards; pointer-events: none; } @keyframes streak-badge-pop { 0% { opacity: 0; transform: translateX(-50%) scale(0.3) translateY(40px); } 10% { opacity: 1; transform: translateX(-50%) scale(1.3) translateY(0); } 20% { transform: translateX(-50%) scale(1) translateY(0); } 75% { opacity: 1; transform: translateX(-50%) scale(1) translateY(-10px); } 100% { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(-50px); } } .streak-badge-emoji { font-size: 4rem; line-height: 1; } .streak-badge-text { font-size: 1.3rem; font-weight: 800; color: var(--sun-deep); text-shadow: 0 1px 6px rgba(27,17,64,0.30); margin-top: 8px; } /* ═══ RESPONSIVE ═══ */ @media (max-width: 400px) { .daily-challenge-card { padding: 12px 14px; } .daily-emoji { font-size: 2rem; } .daily-img { width: 2.5rem; height: 2.5rem; } .daily-name { font-size: 0.95rem; } }