/* =========================================
   Praise Gem Cards (New Design)
   ========================================= */

/* Mobile First Grid */
.praise-gems-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding: 0 1rem;
}

/* Make the last item span full width if odd number */
.praise-gems-grid .praise-gem-card:last-child {
    grid-column: span 2;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (min-width: 768px) {
    .praise-gems-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    /* Reset for desktop: span rules might need adjustment based on count (5 items) */
    /* 3 on top, 2 on bottom centered */
    .praise-gems-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .praise-gem-card {
        width: calc(33.333% - 2rem);
        min-width: 220px;
    }
}

.praise-gem-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 
        0 10px 30px -5px rgba(0, 0, 0, 0.05),
        0 4px 10px -5px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.8);
}

.praise-gem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.praise-gem-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px -5px rgba(0, 0, 0, 0.1),
        0 8px 15px -5px rgba(0, 0, 0, 0.05);
}

.praise-gem-card:hover::before {
    opacity: 1;
}

/* Icon Styles */
.gem-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    transition: transform 0.4s ease, background 0.3s ease, color 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
}

.praise-gem-card:hover .gem-icon-wrapper {
    transform: rotateY(180deg); 
}

/* Card Specific Colors */
/* Sugoi - Yellow/Amber */
.praise-gem-card.gem-sugoi .gem-icon-wrapper { color: #f59e0b; background: #fffbeb; }
.praise-gem-card.gem-sugoi:hover .gem-icon-wrapper { background: #f59e0b; color: #ffffff; }
.praise-gem-card.gem-sugoi:hover { border-color: #fcd34d; }

/* Saikou - Orange */
.praise-gem-card.gem-saikou .gem-icon-wrapper { color: #f97316; background: #fff7ed; }
.praise-gem-card.gem-saikou:hover .gem-icon-wrapper { background: #f97316; color: #ffffff; }
.praise-gem-card.gem-saikou:hover { border-color: #fdba74; }

/* Subarashii - Red/Rose */
.praise-gem-card.gem-subarashii .gem-icon-wrapper { color: #e11d48; background: #fff1f2; }
.praise-gem-card.gem-subarashii:hover .gem-icon-wrapper { background: #e11d48; color: #ffffff; }
.praise-gem-card.gem-subarashii:hover { border-color: #fda4af; }

/* Iine - Blue */
.praise-gem-card.gem-iine .gem-icon-wrapper { color: #3b82f6; background: #eff6ff; }
.praise-gem-card.gem-iine:hover .gem-icon-wrapper { background: #3b82f6; color: #ffffff; }
.praise-gem-card.gem-iine:hover { border-color: #93c5fd; }

/* Sasuga - Purple/Gold mix for Royalty? Let's go Gold/Crown color or Purple */
/* User image had Gold Crown roughly. Let's use a Royal Purple/Gold gradient idea or simple Gold */
.praise-gem-card.gem-sasuga .gem-icon-wrapper { color: #d97706; background: #fff8eb; } /* Using Goldish for Crown */
.praise-gem-card.gem-sasuga:hover .gem-icon-wrapper { background: #d97706; color: #ffffff; }
.praise-gem-card.gem-sasuga:hover { border-color: #fcd34d; }


.gem-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.gem-label {
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Tap hint animation on card */
.praise-gem-card::after {
    content: 'TAP!';
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #cbd5e1;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.praise-gem-card:hover::after {
    opacity: 1;
    transform: translateY(0);
    color: #94a3b8;
}