@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes popIn {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 224, 102, 0.5), 0 0 0 0 rgba(255, 224, 102, 0.4); }
    50%      { box-shadow: 0 0 16px rgba(255, 224, 102, 0.85), 0 0 0 6px rgba(255, 224, 102, 0); }
}

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

@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.3) translateY(40px); }
    50%  { opacity: 1; transform: scale(1.1) translateY(-6px); }
    70%  { transform: scale(0.95) translateY(2px); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

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

.inv-modal-overlay {
    animation: fadeIn 0.25s ease-out;
}

.inv-modal-box {
    animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inv-stats-section,
.inv-titles-section {
    animation: fadeInUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.inv-tab-btn {
    position: relative;
    overflow: hidden;
}

.inv-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffe066, #ffaa00);
    transition: width 0.3s ease, left 0.3s ease;
    border-radius: 2px;
}

.inv-tab-btn:hover::after {
    width: 60%;
    left: 20%;
}

.inv-tab-btn.active::after {
    width: 80%;
    left: 10%;
    animation: shimmer 1.8s linear infinite;
    background: linear-gradient(90deg, #ffe066 0%, #ffffff 50%, #ffe066 100%);
    background-size: 200% 100%;
}

.stat-card,
.title-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.stat-card:nth-child(1)  { animation-delay: 0.02s; }
.stat-card:nth-child(2)  { animation-delay: 0.04s; }
.stat-card:nth-child(3)  { animation-delay: 0.06s; }
.stat-card:nth-child(4)  { animation-delay: 0.08s; }
.stat-card:nth-child(5)  { animation-delay: 0.10s; }
.stat-card:nth-child(6)  { animation-delay: 0.12s; }
.stat-card:nth-child(7)  { animation-delay: 0.14s; }
.stat-card:nth-child(8)  { animation-delay: 0.16s; }
.stat-card:nth-child(9)  { animation-delay: 0.18s; }
.stat-card:nth-child(10) { animation-delay: 0.20s; }
.stat-card:nth-child(11) { animation-delay: 0.22s; }
.stat-card:nth-child(12) { animation-delay: 0.24s; }
.stat-card:nth-child(13) { animation-delay: 0.26s; }
.stat-card:nth-child(14) { animation-delay: 0.28s; }
.stat-card:nth-child(15) { animation-delay: 0.30s; }
.stat-card:nth-child(16) { animation-delay: 0.32s; }

.title-card {
    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.title-card:nth-child(1)  { animation-delay: 0.02s; }
.title-card:nth-child(2)  { animation-delay: 0.04s; }
.title-card:nth-child(3)  { animation-delay: 0.06s; }
.title-card:nth-child(4)  { animation-delay: 0.08s; }
.title-card:nth-child(5)  { animation-delay: 0.10s; }
.title-card:nth-child(n+6) { animation-delay: 0.12s; }

.stat-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.title-card:hover {
    transform: translateX(4px) scale(1.01);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.title-card.just-unlocked,
.stat-card.just-unlocked {
    animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.title-card.equipped-flash {
    animation: glowPulse 1.2s ease-out;
}

.btn-equip-title,
.btn-unequip-title {
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
    position: relative;
    overflow: hidden;
}

.btn-equip-title:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 4px 12px rgba(74, 170, 74, 0.4);
    filter: brightness(1.1);
}

.btn-equip-title:active {
    transform: scale(0.96);
}

.btn-unequip-title:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 4px 12px rgba(212, 68, 68, 0.4);
    filter: brightness(1.1);
}

.btn-equip-title::before,
.btn-unequip-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
}

.btn-equip-title:active::before,
.btn-unequip-title:active::before {
    width: 200%;
    height: 200%;
    opacity: 0;
    animation: rippleOut 0.5s ease-out;
}

@keyframes rippleOut {
    0%   { width: 0; height: 0; opacity: 0.7; }
    100% { width: 250%; height: 250%; opacity: 0; }
}

.inv-tab-btn.active {
    animation: fadeIn 0.3s ease;
}

.inv-titles-current > div {
    animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.inv-titles-current > div[style*="d4af37"] {
    animation: glowPulse 2s ease-in-out infinite;
}

.event-card-box,
.notice-version-box,
.help-step {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.event-card-box:nth-child(1) { animation-delay: 0.05s; }
.event-card-box:nth-child(2) { animation-delay: 0.10s; }
.event-card-box:nth-child(3) { animation-delay: 0.15s; }
.event-card-box:nth-child(4) { animation-delay: 0.20s; }
.event-card-box:nth-child(5) { animation-delay: 0.25s; }

.notice-version-box { animation-delay: 0.05s; }
.help-step:nth-child(1) { animation-delay: 0.05s; }
.help-step:nth-child(2) { animation-delay: 0.10s; }
.help-step:nth-child(3) { animation-delay: 0.15s; }
.help-step:nth-child(4) { animation-delay: 0.20s; }
.help-step:nth-child(5) { animation-delay: 0.25s; }

.inv-stats-title,
.notice-main-title,
.event-main-title,
.help-sign,
.inv-title-text {
    animation: fadeInDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-body-scroll > div[style*="fff3a8"] {
    animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.inv-slot {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.15s ease;
}

.inv-slot:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.btn-event-confirm,
.btn-notice-confirm,
.btn-start-game,
.btn-setting,
.btn-event {
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

.btn-event-confirm:hover,
.btn-notice-confirm:hover,
.btn-start-game:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-event-confirm:active,
.btn-notice-confirm:active,
.btn-start-game:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.player-title-shimmer {
    animation: float 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 768px) {
    .stat-card:hover,
    .title-card:hover,
    .inv-slot:hover {
        transform: none;
    }

    .stat-card,
    .title-card {
        animation-delay: 0s !important;
    }
}