body {
    background-color: #fffafb;
    color: #ff85a1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; padding: 20px;
}

.container { max-width: 1100px; margin: 0 auto; }

.about-section {
    text-align: center; padding: 30px;
    background: white; border-radius: 25px;
    border: 3px dashed #ffc1cf; margin-bottom: 20px;
}

.global-announcement {
    background: #fff0f3; padding: 15px; border-radius: 15px;
    border: 2px solid #ff85a1; margin-bottom: 30px;
    text-align: center; font-weight: bold;
}

#global-hina-count { color: #ff00ff; font-size: 1.4rem; }

#pull-btn {
    display: block; margin: 0 auto 20px auto;
    background-color: #ffb3c1; color: white;
    border: none; padding: 15px 40px;
    font-size: 1.2rem; font-weight: bold;
    border-radius: 50px; cursor: pointer;
    box-shadow: 0 5px 0 #ff85a1;
}

#pull-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #ff85a1; }

.button-group { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }

.sub-btn {
    background: white; color: #ff85a1; border: 2px solid #ffb3c1;
    padding: 8px 15px; border-radius: 20px; cursor: pointer;
}

/* THE 5x2 GRID */
.gacha-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px; margin-top: 20px;
}

.card {
    background: white; padding: 10px; border-radius: 15px;
    border: 2px solid #ffe5ec; transition: transform 0.2s;
    animation: popIn 0.4s ease-out forwards;
}

.card img {
    width: 100%; height: 180px;
    object-fit: contain; /* Keeps PJSK sizes natural */
    border-radius: 10px;
}

.card-info { text-align: center; font-weight: bold; font-size: 0.8rem; margin-top: 8px; }

.badge {
    background: #ff85a1; color: white;
    padding: 2px 8px; border-radius: 10px; font-size: 0.65rem;
}

/* RARITY SPECIALS */
.rarity-SSR { border-color: #ffcc00; box-shadow: 0 0 10px #ffcc00; }
.rarity-ULTRA_RARE { 
    border-color: #ff00ff; box-shadow: 0 0 20px #ff00ff; 
    animation: shake 0.1s infinite;
}

@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0% { transform: translate(1px, 1px); } 50% { transform: translate(-1px, -1px); } }

/* HISTORY LOG */
.history-section { margin-top: 40px; background: white; padding: 20px; border-radius: 20px; border: 1px solid #ffc1cf; }
.history-box { max-height: 250px; overflow-y: auto; text-align: left; }
#history-list { list-style: none; padding: 0; }
.log-ULTRA_RARE { color: #ff00ff; font-weight: bold; background: #fff0ff; }
.log-SSR { color: #d4af37; font-weight: bold; }