/* ============================================
   DAILY LOGIN CALENDAR - ScratchAll
   Juicy, rewarding daily reward popup
   With stacked coin/diamond piles
   ============================================ */

/* Overlay */
.daily-calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    justify-content: center;
    align-items: flex-start; /* Align to top instead of center */
    z-index: 2000;
    padding: 15px;
    padding-top: calc(var(--navbar-height, 75px) + 25px); /* Push content below nav */
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto; /* Allow scrolling if calendar is too tall */
}

.daily-calendar-overlay.visible {
    display: flex;
    opacity: 1;
}

.daily-calendar-overlay.entering {
    display: flex;
    opacity: 0;
}

/* Main Container */
.daily-calendar {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(165deg, #1a1a2e 0%, #0f0f1a 50%, #0a0a14 100%);
    border-radius: 20px;
    border: 2px solid #2a2a4a;
    box-shadow: 
        0 0 60px rgba(138, 43, 226, 0.2),
        0 25px 50px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Height limits - no margin-top needed now */
    max-height: calc(100dvh - var(--navbar-height, 75px) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-shrink: 0; /* Prevent flex squishing */
    
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Hide scrollbar for Webkit */
.daily-calendar::-webkit-scrollbar {
    display: none;
}

.daily-calendar-overlay.visible .daily-calendar {
    transform: scale(1);
}

/* Header */
.daily-calendar-header {
    background: linear-gradient(135deg, #6b21a8 0%, #4c1d95 50%, #3b0d80 100%);
    position: relative;
    overflow: hidden;
    padding-bottom: 25px; /* Extra space at bottom for visual balance */
}

/* --- NEW SEPARATOR CONTAINER --- */
.streak-separator {
    position: relative;
    height: 0; /* Don't take up layout space */
    z-index: 50; /* Sit above header and progress */
    display: flex;
    justify-content: center;
    /* No overflow hidden here! */
}

.daily-calendar-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
    animation: headerShine 4s ease-in-out infinite;
}

@keyframes headerShine {
    0%, 100% { transform: translateX(-30%) translateY(-30%); }
    50% { transform: translateX(30%) translateY(30%); }
}

.daily-calendar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.8em;
    gap: 13px;
    position: relative;
    z-index: 1;
}

.daily-calendar-title h2 {
    margin: 0;
    font-size: 1.6em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
}

.calendar-icon {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation: iconBounce 4s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-4px) rotate(3deg); }
}

.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* More space for image */
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 800;
    color: #000;
    position: absolute;
    top: -16px;
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.5),
        0 0 0 3px #12121f;
    animation: badgePopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Image styling for badge */
.streak-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 220, 93, 1));
}

/* --- FLYING STREAK PARTICLE --- */
.flying-streak-icon {
    position: fixed;
    width: 40px; /* Start slightly larger */
    height: 40px;
    object-fit: contain;
    z-index: 2005;
    pointer-events: none;
    filter: drop-shadow(0 0 10px #f59e0b);
    will-change: transform, top, left;
}

@keyframes badgePopIn {
    from { transform: scale(0) translateY(10px); }
    to { transform: scale(1) translateY(0); }
}

.streak-badge i {
    color: #7c2d12;
    font-size: 1.1em;
}

.flying-flame {
    position: fixed;
    font-size: 24px;
    color: #f59e0b; /* Amber */
    z-index: 2005; /* Above everything */
    pointer-events: none;
    filter: drop-shadow(0 0 8px #ea580c); /* Orange glow */
    transform-origin: center;
    will-change: transform, top, left;
}

.streak-badge.pulse {
    animation: streakPulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes streakPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); filter: brightness(1.2); }
    100% { transform: scale(1); }
}

/* Close Button */
.daily-calendar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.daily-calendar-close:hover {
    background: rgba(0,0,0,0.5);
    color: #fff;
    transform: scale(1.1);
}

/* Progress Bar Updates */
.daily-calendar-progress {
    background: #12121f;
    padding: 15px 75px 40px 40px;
    border-bottom: 1px solid #2a2a4a;
}

/* HIDE PROGRESS TEXT LABELS */
.progress-header {
    display: none; 
}

.progress-track {
    position: relative;
    height: 12px; /* Slightly thicker track */
    background: #1f1f35;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
    margin-top: 15px; /* Spacing for gifts sitting on top */
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #80ff6f, #00f91d);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-markers {
    display: flex;
    justify-content: space-between;
    margin-top: 0; /* Markers sit directly on track */
    padding: 0;
    position: relative;
    height: 0; /* Remove height so markers float on top of track */
}

.progress-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: absolute;
    transform: translateX(-50%); /* Center on point */
    top: 5px; /* Position relative to track */
    cursor: default;
    transition: transform 0.2s ease;
    z-index: 2;
}

/* Position markers based on thresholds */
.progress-marker[data-threshold="20"] { left: 20%; }
.progress-marker[data-threshold="45"] { left: 45%; }
.progress-marker[data-threshold="75"] { left: 75%; }
.progress-marker[data-threshold="100"] { left: 100%; }

.progress-marker.claimable {
    cursor: pointer;
    z-index: 5; /* Bring to front */
}

/* Base size - Larger than before */
.progress-marker-icon {
    width: 30px; /* Increased from 24px */
    height: 30px;
    opacity: 1;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

/* Last gift is biggest */
.progress-marker:last-child .progress-marker-icon {
    width: 45px;
    height: 45px;
    top: -30px;
    left: 18px;
    position: relative;
}
.progress-marker:last-child::before {
    display: none;
}

/* Claimed markers */
.progress-marker.claimed .progress-marker-icon {
    /* filter: grayscale(40%); */
    transform: scale(0.85);
}
.progress-marker:last-of-type.claimed .progress-marker-icon {
    top: -32px;
    left: 30px;
}
.progress-marker:last-of-type.claimed .gift-claimed-badge {
    top: -68px;
}
.progress-marker:last-child.claimable .gift-claim-badge, .progress-marker.claimable:last-child .gift-claimed-badge {
    display: none;
}

/* Claimable Animation - MUCH BIGGER */
.progress-marker.claimable .progress-marker-icon {
    animation: giftPulseBig 1.5s ease-in-out infinite;
}
.progress-marker.claimable:nth-of-type(even) .progress-marker-icon {
    animation: giftPulseBig2 1.5s ease-in-out infinite;
}

.progress-marker::before {
    content: ''; /* Required for pseudo-elements to render */
    width: 10px;
    height: 10px;
    border-radius: 25px;
    background: transparent;
    border: 3px #fff solid;
    opacity: 1;

    /* Positioning and Layering adjustments */
    position: absolute; 
    top: -9px; 
    /* Center the pseudo-element over the track position point */
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    
    z-index: 1;
}

@keyframes giftPulseBig {
    0%, 100% { 
        transform: scale(1.1); 
        filter: drop-shadow(0 0 8px rgba(197, 154, 34, 0.6));
    }
    50% { 
        transform: scale(1.3); /* Pulse larger */
        filter: drop-shadow(0 0 15px rgba(197, 143, 34, 1));
    }
}

@keyframes giftPulseBig2 {
    0%, 100% { 
        transform: scale(1.1); 
        filter: drop-shadow(0 0 8px rgba(179, 188, 187, 0.6));
    }
    50% { 
        transform: scale(1.3); /* Pulse larger */
        filter: drop-shadow(0 0 15px rgb(171, 181, 182));
    }
}

/* Even bigger pulse for the last gift */
.progress-marker.claimable:last-child .progress-marker-icon {
    animation: giftPulseMega 1.5s ease-in-out infinite;
}

@keyframes giftPulseMega {
    0%, 100% { 
        transform: scale(1.1); 
        filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
    }
    50% { 
        transform: scale(1.45); /* Mega pulse */
        filter: drop-shadow(0 0 25px rgba(168, 85, 247, 1));
    }
}

/* Hide the numbers under the gifts */
.progress-marker span {
    display: none; 
}

/* Adjust badges for larger icons */
.gift-claim-badge {
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    font-size: 12px;
}

.gift-claimed-badge {
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
}

/* Gift claim badge (exclamation) */
.gift-claim-badge {
    position: relative;
    top: -53px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #fba124, #ff7700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    box-shadow: 0 2px 6px rgba(197, 34, 34, 0.5);
    animation: badgeBounce 1s ease-in-out infinite;
    z-index: 15;
}

@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Gift claimed badge (check) */
.gift-claimed-badge {
    position: relative;
    top: -53px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8px;
    z-index: 15;
}

/* Calendar Grid */
.daily-calendar-body {
    padding: 15px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

/* Day Card */
.day-card {
    background: linear-gradient(145deg, #1e1e35 0%, #151525 100%);
    border-radius: 12px;
    border: 2px solid #2a2a4a;
    padding: 10px 8px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes label to top, reward to middle */
    height: 100%; /* Force card to fill the grid cell height */
    box-sizing: border-box; /* Include padding/border in height */
}

.day-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
    pointer-events: none;
}

.day-card.claimed {
    border-color: #1fbd59;
    background: #151525;
}

.day-card.claimed .reward-stack-container, .day-card.claimed .multi-reward, .day-card.missed .reward-stack-container, .day-card.missed .multi-reward {
    opacity: .6;
}

.day-card.claimed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    pointer-events: none;
}

/* --- WAITING STATE (Next up, but cooldown active) --- */
.day-card.waiting {
    border-color: #4b5563; /* Grey border */
    border-style: dashed;
    background: linear-gradient(145deg, #1e1e35 0%, #151525 100%);
    cursor: default;
}

.day-card.waiting .day-label {
    opacity: 0;
}

.day-card.waiting .day-reward {
    z-index: 21;
}

/* --- COUNTDOWN OVERLAY ON CARD --- */
.card-timer-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 2px;
    z-index: 20;
    border-radius: 10px;
    animation: fadeIn 0.3s ease;
}

.card-timer-label {
    font-size: 0.75em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 0;
    font-weight: 700;
}

.card-timer-value {
    font-size: 1.2em;
    line-height: 1em;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.day-card.today {
    border-color: #a855f7;
    box-shadow: 
        0 0 20px rgba(168, 85, 247, 0.3),
        inset 0 0 20px rgba(168, 85, 247, 0.1);
    animation: todayPulse 2s ease-in-out infinite, todayUrge 1s ease-in-out infinite;
    cursor: pointer;
}

@keyframes todayPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.1); }
    50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(168, 85, 247, 0.15); }
}

@keyframes todayUrge {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-3px) rotate(2deg); }
    60% { transform: translateY(-3px) rotate(-2deg); }
}

.day-card.today.claiming {
    animation: claimingShake 0.5s ease-in;
}

@keyframes claimingShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.day-card.locked {
    border-color: #1f1f35 !important;
    background: #0a0a10 !important;
    opacity: 1;
}

.day-label {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}

.day-card.today .day-label {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
}

.day-card.locked .day-label {
    background: linear-gradient(135deg, #a855f79e, #7c3aed9e);
    color: #ffffff9e;
}

.day-card:not(.today):not(.locked):not(.missed) .day-label {
    background: #2a2a4a;
    color: #9ca3af;
}

/* Missed Day State */
.day-card.missed {
    border-color: #e31d1d; /* Red border */
    background: linear-gradient(145deg, #1a1a1a 0%, #2a1212 100%);
}

.day-card.missed .day-label {
    background: #741919;
    color: #c86c6c;
    text-decoration: line-through;
}

/* Gray out the lost reward */
.day-card.missed .day-reward {
    filter: grayscale(100%) opacity(0.5);
    pointer-events: none;
}

/* Missed "X" Badge */
.missed-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.missed-badge i {
    font-size: 3em;
    color: #ff0000;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    animation: stampIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform: scale(2);
    opacity: 0;
}

@keyframes stampIn {
    to { transform: scale(1) rotate(-15deg); opacity: 1; }
}

/* --- NEW WEEK LOCK OVERLAY --- */
.new-week-overlay {
    position: absolute;
    top: 160px; /* Offset to sit below the header */
    left: 0;
    right: 0;
    bottom: 40px;
    background: rgba(11, 11, 20, 0.85); /* Deep dark blue/black */
    backdrop-filter: blur(12px) saturate(200%); /* Strong blur */
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    border-radius: 0 0 20px 20px;
    opacity: 0; 
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.new-week-overlay.visible {
    opacity: 1;
}

.new-week-icon {
    font-size: 3.5em;
    color: #a855f7;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.4));
    animation: floatIcon 6s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 50%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    75% { transform: translateY(-10px) rotate(5deg); }
}

.new-week-title {
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.new-week-text {
    font-size: 1em;
    color: #9ca3af;
    margin-bottom: 25px;
    line-height: 1.5;
    max-width: 280px;
}

.new-week-timer {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 1.5em;
    font-weight: 800;
    color: #a855f7;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Reward Display */
.day-reward {
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    /* --- NEW HEIGHT FIX --- */
    height: 70px; /* Fixed height large enough for tallest pile + text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center vertically in the fixed space */
    gap: 4px;
    position: relative;
    margin-bottom: auto; /* Helps centering in the flex column */
    margin-top: auto;
}

/* ============================================
   STACKED REWARD PILES
   ============================================ */

.reward-stack-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.reward-stack-container.claimable .reward-pile {
    animation: pileBreathe 2s ease-in-out infinite;
}

@keyframes pileBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.reward-pile {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: visible;
}

.reward-pile.small {
    width: 40px;
    height: 40px;
}

/* Stack items */
.stack-item {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: 
        translateX(-50%)
        translateY(50%)
        translateX(var(--offset-x, 0px)) 
        translateY(var(--offset-y, 0px)) 
        rotate(var(--rotation, 0deg))
        scale(var(--scale, 1));
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: calc(10 - var(--stack-index, 0));
}

/* Add a stronger shadow to the bottom items to ground the pile */
.stack-item:first-child .stack-icon {
    filter: drop-shadow(0 5px 4px rgba(0,0,0,0.6));
}

/* Make the top item shine a bit more */
.stack-item:last-child .stack-icon {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4)) brightness(1.1);
}

.stack-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Coin stack specifics */
.coin-stack .stack-icon {
    filter: 
        drop-shadow(0 2px 3px rgba(0,0,0,0.5))
        drop-shadow(0 0 8px rgba(255, 176, 7, 0.3));
}

/* Diamond stack specifics */
.diamond-stack .stack-icon {
    width: 28px;
    height: 28px;
    filter: 
        drop-shadow(0 2px 3px rgba(0,0,0,0.5))
        drop-shadow(0 0 10px rgba(0, 212, 255, 0.4));
}

/* Hover effects on claimable piles */
.day-card.today .stack-item, .day-card.waiting .stack-item {
    animation: stackFloat 2s ease-in-out infinite;
    animation-delay: calc(var(--stack-index, 0) * 0.1s);
}

@keyframes stackFloat {
    0%, 100% { 
        transform: 
            translateX(-50%)
            translateY(50%)
            translateX(var(--offset-x, 0px)) 
            translateY(var(--offset-y, 0px)) 
            rotate(var(--rotation, 0deg))
            scale(var(--scale, 1));
    }
    50% { 
        transform: 
            translateX(-50%)
            translateY(50%)
            translateX(var(--offset-x, 0px)) 
            translateY(calc(var(--offset-y, 0px) - 3px)) 
            rotate(var(--rotation, 0deg))
            scale(calc(var(--scale, 1) * 1.05));
    }
}

/* Claiming animation - items peel off */
.day-card.claiming .stack-item {
    animation: stackPeelOff 0.6s ease-out forwards;
    animation-delay: calc(var(--stack-index, 0) * 0.08s);
}

.day-card.claiming .chest-stack .stack-item {
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(50%) scale(1) !important;
}

@keyframes stackPeelOff {
    0% {
        transform: 
            translateX(-50%)
            translateY(50%)
            translateX(var(--offset-x, 0px)) 
            translateY(var(--offset-y, 0px)) 
            rotate(var(--rotation, 0deg))
            scale(var(--scale, 1));
        opacity: 1;
    }
    40% {
        transform: 
            translateX(-50%)
            translateY(50%)
            translateX(calc(var(--offset-x, 0px) + 10px)) 
            translateY(calc(var(--offset-y, 0px) - 30px)) 
            rotate(calc(var(--rotation, 0deg) + 20deg))
            scale(1.3);
        opacity: 1;
    }
    100% {
        transform: 
            translateX(-50%)
            translateY(50%)
            translateX(var(--offset-x, 0px)) 
            translateY(calc(var(--offset-y, 0px) - 20px)) 
            rotate(var(--rotation, 0deg))
            scale(0);
        opacity: 0;
    }
}

/* Small stacks for multi-reward */
.reward-pile.small .stack-icon {
    width: 22px;
    height: 22px;
}

/* Single reward (chest, etc) */
.reward-stack.single {
    position: relative;
    width: 50px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    position: relative;
    z-index: 1;
}

.day-card.today .reward-icon {
    animation: rewardFloat 2s ease-in-out infinite;
}

@keyframes rewardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.reward-amount {
    font-size: 1em;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.reward-amount.diamond {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Multi-reward display */
.multi-reward {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    justify-content: center;
}

.mini-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mini-reward .reward-pile {
    width: 36px;
    height: 36px;
}

.mini-reward .stack-icon {
    width: 20px;
    height: 20px;
}

.mini-reward .reward-amount {
    font-size: 0.75em;
}

/* Checkmark for claimed days */
.claimed-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
    z-index: 5;
}

/* Day 7 - Big Reward */
.day-card.day-7 {
    grid-column: 1 / -1;
    background: linear-gradient(145deg, #1e1e35 0%, #251530 50%, #151525 100%);
    border-color: #4c1d95;
    padding: 15px;
}

.day-card.day-7 .day-label {
    font-size: 0.85em;
    padding: 4px 14px;
}

.day-card.day-7 .day-reward {
    flex-direction: row;
    gap: 20px;
    min-height: 70px;
}

.day-card.day-7 .reward-pile {
    width: 55px;
    height: 55px;
}

.day-card.day-7 .stack-icon {
    width: 32px;
    height: 32px;
}

.day-card.day-7 .reward-icon {
    width: 50px;
    height: 50px;
}

.day-card.day-7 .reward-amount {
    font-size: 1.1em;
}

/* Claim Button */
.claim-button-container {
    padding: 5px 15px 20px 15px;
}

.daily-claim-button {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.2em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%);
    color: #fff;
    box-shadow: 
        0 4px 15px rgba(168, 85, 247, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.daily-claim-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: buttonShine 2s ease-in-out infinite;
}

@keyframes buttonShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.daily-claim-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 25px rgba(168, 85, 247, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.daily-claim-button:active {
    transform: translateY(0) scale(0.98);
}

.daily-claim-button.claimed {
    background: #374151;
    color: #9ca3af;
    cursor: default;
    box-shadow: none;
}

.daily-claim-button.claimed::before {
    display: none;
}

.daily-claim-button i {
    margin-right: 8px;
}

/* Timer */
.next-reward-timer {
    text-align: center;
    padding: 8px;
    font-size: 0.85em;
    color: #9ca3af;
    min-height: 32px; /* Prevent layout shift */
}

.next-reward-timer span {
    color: #a855f7;
    font-weight: 700;
    transition: all 0.3s ease;
}

.next-reward-timer span.ready {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
    animation: readyPulse 1s ease-in-out infinite;
}

@keyframes readyPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* Claim Animation Overlay */
.claim-celebration {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

.claim-celebration.active {
    animation: celebrationFlash 0.6s ease-out;
}

@keyframes celebrationFlash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

/* Flying reward animation */
.flying-reward {
    position: fixed;
    pointer-events: none;
    z-index: 2001;
    animation: flyToTarget 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes flyToTarget {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Particle canvas for calendar */
#calendarParticleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10006;
}

/* ============================================
   CHEST OPENING ANIMATION
   ============================================ */

.chest-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, background-color 0.8s ease; /* Slower bg fade */
}

/* Standard active state */
.chest-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* New state: Overlay stays "active" in DOM but background becomes transparent */
.chest-overlay.fading-out {
    background-color: rgba(0, 0, 0, 0) !important;
    pointer-events: none; /* Let clicks pass through to game */
}

/* Ensure chest and label fade out quickly when the overlay fades out */
.chest-overlay.fading-out .chest-container {
    opacity: 0;
    transition: opacity 0.3s ease-out; /* Disappear quickly */
}

.chest-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ensure clicks on container don't close if we don't want them to */
    pointer-events: auto; 
}

.chest-image {
    width: 140px; /* Slightly larger */
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(255, 176, 7, 0.5));
    cursor: pointer;
    /* Transition for the fly-in effect */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                left 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chest-image:hover {
    filter: drop-shadow(0 0 50px rgba(255, 176, 7, 0.8)) brightness(1.2);
    transform: translate(-50%, -50%) scale(1.05); /* Maintain centering + scale */
}

.chest-image.shaking {
    animation: chestShake 0.5s ease-in-out;
}

@keyframes chestShake {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    15% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.05); }
    30% { transform: translate(-50%, -50%) rotate(8deg) scale(1.1); }
    45% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.15); }
    60% { transform: translate(-50%, -50%) rotate(10deg) scale(1.2); }
    75% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.15); }
    90% { transform: translate(-50%, -50%) rotate(5deg) scale(1.1); }
}

.chest-image.exploding {
    animation: chestExplode 0.3s ease-out forwards;
}

@keyframes chestExplode {
    0% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
        filter: drop-shadow(0 0 30px rgba(255, 176, 7, 0.5));
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
        filter: drop-shadow(0 0 80px rgba(255, 255, 255, 1));
    }
}

.chest-label {
    margin-top: 120px; /* Push down below absolute positioned chest */
    font-size: 1.8em;
    font-weight: 800;
    color: #fff;
    text-align: center;
    opacity: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.chest-label.visible {
    opacity: 1;
    transform: translateY(0);
}

.chest-tap-hint {
    margin-top: 10px;
    font-size: 1em;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: opacity 0.4s ease;
}

.chest-tap-hint.visible {
    opacity: 1;
    animation: pulseHint 2s ease-in-out infinite;
}

@keyframes pulseHint {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Responsive */
@media (max-width: 400px) {
    .daily-calendar {
        max-width: 100%;
        border-radius: 16px;
    }
    
    .calendar-grid {
        gap: 8px;
    }
    
    .day-card {
        padding: 8px 6px;
    }
    
    .reward-pile {
        width: 42px;
        height: 42px;
    }
    
    .stack-icon {
        width: 24px;
        height: 24px;
    }
    
    .day-card.day-7 .reward-pile {
        width: 48px;
        height: 48px;
    }
    
    .day-card.day-7 .stack-icon {
        width: 28px;
        height: 28px;
    }
}

@media (hover: hover) {
    .day-card.today:hover {
        transform: translateY(-5px);
    }
}
/* Disable hover effects on touch devices to prevent sticky states */
@media (hover: none) {
    .day-card.today:hover {
        transform: none;
    }
    .day-card.today:active {
        transform: scale(0.96);
    }
}

/* ============================================
   PERFORMANCE & GRAPHICS SETTINGS
   ============================================ */

/* Reduced Graphics (Fast) */
html[data-graphics="fast"] .daily-calendar,
html[data-graphics="fast"] .day-card,
html[data-graphics="fast"] .progress-fill {
    box-shadow: none !important;
}

/* Fastest Graphics (No Effects) */
html[data-graphics="fastest"] .daily-calendar,
html[data-graphics="fastest"] .day-card,
html[data-graphics="fastest"] .daily-calendar-header::before,
html[data-graphics="fastest"] .progress-fill,
html[data-graphics="fastest"] .chest-image,
html[data-graphics="fastest"] .chest-label,
html[data-graphics="fastest"] .streak-badge,
html[data-graphics="fastest"] .daily-claim-button {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
}

html[data-graphics="fastest"] .daily-calendar-overlay {
    backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.95); /* Solid dark bg instead */
}